늘 겸손하게

리액트 생명주기 메소드 중 하나인 shouldComponentUpdate()에 대해 알아보자 [ shouldComponentUpdate ] 메소드 이름을 보면 알 수 있듯이 컴포넌트를 업데이트 시킬까 말까에 대한 질문이다. 이 메소드는 props 또는 state가 변경되었을 경우, 렌더링이 발생하기 직전에 호출된다. 디폴트로 true 반환 이 메소드는 성능 최적화를 위한 메소드로 이전 props와 state값이 달라지지 않아서 불필요한 렌더링을 방지할 목적이라면 PureComponent를 사용하는것이 더 좋습니다. 불필요한 렌더링 방지를 shouldComponentUpdate로 수행하면 버그로 이어질수도 있습니다. PureComponent 설명 : https://besforyou.tistory.com/2..

[ React Prop drilling 이슈 ] React에서 자식 컴포넌트에 데이터를 전달하고 싶은 경우 props를 통해 데이터를 간편하게 전달할 수 있습니다. 하지만 깊이 중첩된 자식 컴포넌트에 데이터를 전달하려는 경우에 문제가 생깁니다. 그 문제란, 데이터를 전달하려는 조상 컴포넌트와 데이터를 받으려는 자식 컴포넌트 중간의 많은 컴포넌트들이 모두 props로 데이터를 받고 다시 자식 컴포넌트에 props로 데이터를 전달해야하는 prop drilling을 해야합니다. 만약 전달하려는 데이터가 state라면 어떨까요? 현재 가지고 있는 state값과 다른 state값을 전달받은 컴포넌트는 리렌더링이 일어납니다. 또한 컴포넌트는 변경된 state값을 부모 컴포넌트에 전달하기도합니다. 위와 같은 stat..

[ Redux란? ] 자바스크립트를 위한 예측 가능한 state 컨테이너 https://besforyou.tistory.com/233 Redux - 왜 Redux를 사용하나요? Redux란? 공식 페이지에서는 Redux를 "자바스크립트를 위한 예측가능한 state 컨테이너"로 정의합니다. Redux는 한 마디로 자바스크립트 상태(state) 관리 라이브러리입니다. Redux는 state 관리 라이브러 besforyou.tistory.com [ Redux의 장점 ] 장점 1. 버그 예측이 쉬워진다 Redux는 데이터가 단방향으로 흐르고 Action에 의해서만 state가 변경되어 어디서 오류가 발생했는지 찾기가 매우 수월하다. 모든 Action의 dispatch는 history에 기록이 남아 버그 찾기에 ..

Context API 일반적으로 React 데이터는 부모로부터 자식으로 props를 통해 전달됩니다. 하지만 여러 자식 컴포넌트 혹은 깊이가 깊은 트리에서 자식 컴포넌트에 데이터를 전달해야하는 경우에는 이 과정이 번거로울 수 있습니다. Context API는 모든 자식 컴포넌트에 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있습니다. 다른 프로그래밍 언어에서 전역변수와 비슷한 역할입니다. 언제 context를 써야 할까? context는 컴포넌트 트리에서 전역적인 데이터를 공유할 수 있는 방법입니다. 그러한 데이터로는 현재 로그인한 유저, 테마, 선호하는 언어등이 있습니다. 예로 아래의 코드는 버튼 컴포넌트를 꾸미기 위해 테마 props를 명시적으로 넘겨주고 있습..