Hazellog

이전에는 전역 변수의 관리를 위해 React context를 사용했다면, 이번에는 Redux를 사용하려고 한다. React와 typescript 환경에서 코드를 작성하고 있다! Redux란? 리덕스는 action 이벤트를 사용하여 어플리케이션 상태를 관리하고 업데이트하는 라이브러리이다. 전체 어플리케이션에서 상태에 접근할 수 있는 특징이 있어 전역 변수를 관리할 수 있다. 즉, 해당 값이 필요한 컴포넌트에 도달하기 위해서 거치는 모든 자식 컴포넌트에 매개변수로 값을 전달하지 않고, 값이 필요한 컴포넌트에서만 참조하여 사용할 수 있다. https://react-redux.js.org/ React Redux | React Redux Official React bindings for Redux react-re..

React context는 상태를 전역적으로 관리할 수 있다. 하위 컴포넌트에 props로 인자를 전달하는 경우, 값을 사용하지 않는 컴포넌트라도 전달의 목적으로 값을 전달해야 한다. context를 사용하여 상태관리를 더 효율적으로 관리할 수 있다. useContext는 useState 를 함께 사용하여 구현할 수 있다. nested 되어 props로 변수를 전달하는 경우는 아래 코드와 같다. //Nested.js export const Nested = (props) => { return ( Nested ) } const Component = (props) => { return ( Component ) } const Component2 = (props) => { return ( Component2 {p..

Context 란? Context는 모든 자식 컴포넌트에 props로 전달하지 않고 데이터를 전달할 수 있는 방법이다. 데이터는 top-down 방식으로 props를 사용하여 전달하는 경우, 사용하려는 자식 컴포넌트에 도달할 때까지 모든 컴포넌트에 props로 전달해야 한다는 번거로움이 있다. context는 컴포넌트 안에서 전역적으로 데이터를 공유할 수 있어 props 전달없이 데이터를 확인할 수 있다. 이는 사용자 정보, 테마, 언어 등을 관리할 때 사용할 수 있다. ☝🏻 만약, 단순히 많은 단계를 거쳐 props를 전달하는 것을 피하기 위함이라면 context 보다는 component composition 이 더 나은 방법일 수 있다. API React.createContext const MyCon..