풀스택 17일차

Redux

Redux는 프로그램 소스코드의 복잡도를 줄이기 위한 상태 관리 라이브러리이다. React와 같은 프론트엔드 라이브러리에서 주로 사용되며, 컴포넌트의 상태를 하나의 중앙 저장소인 Store에서 체계적으로 관리할 수 있게 해준다. Store는 애플리케이션의 상태를 담고 있으며, 특정 상태가 변경될 때마다 관련된 컴포넌트에 자동으로 상태가 적용되도록 처리된다.

Redux를 사용하면 컴포넌트 간의 상태 종속성에서 벗어날 수 있어, 일명 "props 지옥"을 탈출할 수 있다. 상태 관리가 한 곳에서 이루어지기 때문에 복잡한 상태 전달 구조를 단순화할 수 있다. Redux는 기본적으로 개발자 모드로 설치할 수 있으며, 예를 들어, npm i -D redux 명령어를 사용하면 된다.

 

useEffect Hook

useEffect는 React에서 컴포넌트가 렌더링될 때와 특정 상태나 props가 변경될 때 비동기적으로 실행되는 Hook이다. 첫 번째 인자로 콜백 함수를 받고, 두 번째 인자로는 감시할 요소들의 배열을 받는다. 이 배열에 지정된 요소가 변경될 때마다 useEffect의 콜백 함수가 다시 실행된다. 배열을 비워두면 컴포넌트의 최초 렌더링 시에만 실행된다.

예를 들어 아래와 같은 코드가 있을 때 

useEffect(() => {
    console.log('진입');
    axios.get("http://localhost:5000/todo").then(res => {
        setTodoList(res['data']);
    }).catch(err => {
        console.log(err);
    });
}, []);

이 코드는 컴포넌트가 처음 렌더링될 때 한 번 실행되며, TodoList를 서버로부터 가져오는 비동기 작업을 수행한다. useEffect 내의 콜백 함수는 리액트의 컴포넌트 렌더링 과정과 독립적으로 동작한다는 점에서 유용하다.

 

Axios를 이용한 REST API 호출

React에서 axios를 사용하여 서버와 통신할 때, 주로 REST API 호출을 수행한다. axios는 Promise 기반의 HTTP 클라이언트로, 서버 URL과 요청 데이터를 인자로 받아 처리한다. 예를 들어 아래 같은 코드를 사용하여 POST 요청을 보낼 수 있다:

const onClickEvent = (inputTitle) => {
    axios.post(serverURL, { title: inputTitle })
        .then(res => {
            setTodoList(res.data);
        })
        .catch(err => {
            console.log(err);
        });
};

이 코드는 사용자가 버튼을 클릭했을 때 inputTitle을 서버로 보내고, 서버의 응답을 받아 TodoList를 업데이트한다. then과 catch 체인 메서드를 사용하여 응답에 대한 처리를 정의할 수 있다.

클라우드 서버 및 플랫폼 활용

AWS, NCP와 같은 클라우드 서버, 리눅스, Git과 같은 플랫폼들을 잘 다루면 개발 작업이 더욱 수월해진다. 특히, 이러한 도구들을 능숙하게 사용할 수 있으면 다양한 프로젝트를 효율적으로 관리할 수 있다.

React와 Redux

React와 Redux를 함께 사용하면 상태 관리를 더욱 쉽게 할 수 있다. Redux를 통해 컴포넌트 간 상태 전달을 단순화할 수 있어 복잡한 구조를 피할 수 있다. 특히 "props 지옥"이라고 불리는, 상위 컴포넌트에서 하위 컴포넌트로 계속해서 props를 전달하는 문제를 해결할 수 있다.

useRef Hook

useRef는 React에서 렌더링과 관련되지 않은 값을 참조할 수 있는 Hook이다. 예를 들어, DOM 요소에 직접 접근하거나, 상태 변화와 상관없이 값을 유지할 때 유용하다:

const ref = useRef(initialValue);

이렇게 생성된 ref 객체는 컴포넌트의 라이프사이클 동안 유지되며, 값이 변경되어도 재렌더링을 트리거하지 않는다. useRef는 주로 DOM 조작이나 저장 공간으로 활용된다.

다양한 기술 스택을 활용한 개발

Node.js, Spring Boot, Firebase, React와 같은 다양한 기술 스택을 조합하여 거의 모든 종류의 애플리케이션을 만들어낼 수 있다. 이들 기술을 잘 활용하면 서버, 클라이언트, 데이터베이스, 실시간 기능까지 아우르는 포괄적인 애플리케이션 개발이 가능하다.