컨텍스트

이번 포스팅에서는 React의 내재된 상태관리 API인 Context에 대한 사용 방법을 알아보려고 한다. 리액트에서 데이터는 일반적으로 props, state로 관리하며 부모 컴포넌트에서 자식 컴포넌트로 흐르게 된다. 이 부분에 대해서는 이번 글에서는 길게 설명하지는 않겠다. 예를 들어 E 컴포넌트에서 state를 만들고 그걸 prop drilling 방식으로 G에 내려 주어서 사용하는 식이다. 그런데 때에 따라서는 정말 많은 컴포넌트에서 데이터를 써야 할 일이 있을 수도 있다. 위의 그림처럼 많은 컴포넌트에서 데이터를 사용해야 한다면, 사실상 전역으로 사용한다고 보아도 무방하다. 이 경우는 Root Component에서 state를 만들고 각각 자식 컴포넌트로 props 를 내려주는 식으로 사용을 해..

이번 포스팅에서는 리액트의 Context API의 개념과 Use Cases에 대해서 정리해 본다. Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 예를 들면 프로젝트 내의 환경 설정, 사용자 정보와 같은 것들이 있을 수가 있다. 과거에는 이러한 데이터를 최상위 컴포넌트의 state에 담아서 props로 전달했었다. 하지만 이렇게 하는 경우 컴포넌트의 깊이가 깊어질 수록 거쳐야 하는 컴포넌트가 많아서 번거로움이 있었다. 이를 해결하기 위해서 Redux나 MobX와 같은 별도의 라이브러리를 사용하기도 하지만, 별도의 라이브러리가 없어도 Context API를 통해 전역 상태를 관리할 수가 있다. 지금부터 리액트 공식 문서에서 제공하는 Context API를 하..

오늘은 자바스크립트에서 많은 개발자들이 헷갈려하는 this 키워드에 대해서 확실하게 짚고 가보려고 한다. 많은 개발자들은 this를 다음 두 가지 의미로 많이 생각한다. 함수 그 자체를 가리킴 함수의 스코프(scope)를 가리킴 결론적으로 둘 다 올바른 의미로 이해한 것은 아니다. 하나씩 설명해 보려고 한다, 자기 자신으로의 this 함수가 내부에서 자기 자신을 가리킬 일이 언제 있을까? 재귀 로직이 들어가는 경우도 있고 최초 호출 시 이벤트에 바인딩 된 함수 자신을 언바인딩 할 때도 자기 참조가 필요하다. 아래의 코드는 함수가 this로 자기 참조를 할 수 없다는 것을 보여주는 예제이다. foo.count = 0을 하면 foo라는 함수 객체에 count 프로퍼티가 추가된다. 하지만 this.count에..