Context, Reducer

React Context

일반적인 React 애플리케이션에서 데이터는 부모로부터 자식에게 props를 통해 전달됩니다. 하지만

1. 애플리케이션 안의 여러 컴포넌트들에 동일한 props값을 전해줘야 하는 경우, 혹은

2. 오로지 하위 컴포넌트로 데이터를 전달하기 위해 중간에 위치한 컴포넌트들에 전달하는 용도로만 쓰이는 props를 사용할 경우 이 과정이 번거로울 수 있습니다. 

 

context는 React 컴포넌트 트리 안에서 데이터를 전역으로(global)사용할 수 있도록 고안된 방법입니다. Context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있습니다. 

 

 

useReducer

useState의 대체 함수입니다. 보통 숫자형이나 문자열 같은 같단한 형태의 데이터는

useState를 사용하지만 객체와 같이 복잡한 형태의 데이터를 다룰 때 많이 사용합니다.

 

const [관리할 값, dispatch 함수] = useReducer(리듀서 함수, 관리할 값의 초기화)

리듀서는 위의 형태로 사용하며, dispatch 함수는 리듀서 함수를 호출하는 역할을 합니다.

 

dispatch({type: 'login', payload: user})

dispatch 함수는 위와 같은 형태로 사용합니다. 전달하는 인자를 action이라고 하며 action에는 type과 전달할 데이터인 payload가 있습니다. 

 

조건부 랜더링 (https://ko.reactjs.org/docs/conditional-rendering.html) 리액트는 조건식을 이용하여 컴포넌트의 랜더링을 결정할 수 있습니다. && 연산자를 이용하는 방식의 경우 만약, false 혹은 null 이 반환되면 리액트는 해당 값을 무시하고 컴포넌트를 랜더링 하지 않습니다. 본인이 생각했을 때 가독성이 좋다고 생각하는 방식, 혹은 회사의 컨벤션을 선택하면 됩니다.