Hazellog

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..

문제 페이지를 새로고침하는 경우, 모든 변수와 상태 값이 초기화되는 문제가 있었다. 결론적으로 useState와 useContext를 정확하게 이해하지 않아 발생한 오류였다. useState 는 변수 값을 상태 값으로 저장하여 상태 값이 변경되었을 경우, 해당 상태 값을 사용하는 컴포넌트만 부분적으로 리렌더링된다. 전체 페이지를 리렌더링 하지 않고, 부분 리렌더링으로 부하를 줄일 수 있다. useContext는 useState의 사용이 많거나 변수를 전역으로 선언하여 사용하는 경우에 사용에 용이하다. useState 값을 context 내에 저장하여 관리할 수 있다. 다만, 두 Hook 모두 값이 변하지 않는 것이 아니다. 리렌더링 되는 경우에는 기존의 값을 기준으로 변화된 컴포넌트들만 바뀌어 렌더링되어..