react18 [React]React와 JSX. 개요 리액트의 경우 기본적으로 jsx라는 자바스크립트 확장 문법을 사용한다. 물론 해당 문법을 사용하지 않아도 사용가능하긴하지만 리액트가 가진 편리함이 많이 줄어든다. 기본적으로 jsx문법을 활용하기 위해서는 babel이나 tsc같은 트랜스파일러를 필요로 하는데 그렇게 치환 할 경우 React.createElements 등의 함수를 호출하는 코드로 트랜스 파일링 된다. 그리고 createElements는 일정한 구조의 객체를 반환한다. 해당 부분에 대한 간단한 흐름을 코드를 통해서 살펴보자. JSX 본래라면 트랜스파일러 내부를 어느 정도 들여다보아야 정확한 이해가 가능하지만 그럴 경우 관심사가 분산되니 해당 부분은 생략하겠다. 리액트의 바벨 jsx 런타임 관련 코드는 react패키지의 src폴더 내의 j.. 2022. 4. 14. [웹챗] 컨텍스트 정리하기 해당 사이드의 경우 특정 상태관리 오픈소스에 대한 종속성을 없애기 위해서 React hook중 context 와 state 훅 만을 사용해서 글로벌 state를 관리한다. 일단 기존의 context 사용 방식의 경우 여러 컨텍스트를 각 도메인(영역)에 맞게 여러개 만들어서 각 context가 필요한 영역에서 가져다 쓰는 방식이였는데 해당 프로젝트 목적인 사용자 커스텀 기능을 추가하기 위해서 글로벌 state를 많이 추가해야 할 필요성을 느꼈고, 그럴 경우 기존의 방식으로는 너무 난잡하고 코드 스멜이 심해지는 점 때문에 각 state를 도메인 별로 또 state별로 분리해서 관리할 필요성을 느꼈다. Context를 정리하는 가장 쉬운 방식은 Recoil이나 RTK 같은 상태관리 오픈소스를 사용하는 것이겠지.. 2022. 3. 8. [리액트][함수] 컴포넌트 컨텍스트 & 사이드 이펙트 컨텍스트 컴포넌트 컨텍스트는 각 렌더링 마다 고유한 컨텍스트(스코프)를 가진다. 이걸 어렵게 생각 하지말자 for(let int = 0; int < n; int++){ 컨텍스트(scope)} 에서 매 반복마다 int가 각각 다른 값인 것과 같다. 1.useEffect 훅의 경우 미래는 모르겠지만, 현재는 리액트 컴포넌트 사이클 외부에 해당한다. 그래서 내부에서 리액트 훅을 사용 할 수 없다. 내부 컨텍스트를 최신화 하기 위해서 [deps]로 변경 되는 모든 변수를 넣어주자. 또 클린업 함수를 신경쓰자. 2. useRef를 통해서도 가능하지만 사이드 이펙트 수준을 넘어서 비제어화 하니 최대한 안쓰는게 좋다. 3. useCallback을 적절히 사용하자. 4. useMemo로 최적화 해야 할 상황이 왔다면 코드를 잘.. 2022. 1. 21. [react]내가 context hook을 쓰지 않는 이유. 예전에 면접 본 곳 중 몇 군데서 받은 질문 중 하나가 redux나 recoil 같은 상태 관리 오픈소스를 사용하지 않고 리액트 자체에서 제공하는 context API 사용 해본적 없냐는 질문이다. 없다고 하면 추가적으로 써볼 필요성을 느껴본 적 없냐는 질문을 여러 번 받았다. 사용한 적 없던 당시에도 굳이 실무에서 상태관리 라이브러리 사용하지 않고 context 훅을 쓸 이유가 없다고 답했던 것 같은데 이건 내가 오픈소스를 만들면서 context API를 직접 사용해보고 그 이유를 보충해서 쓰는 내용이다. 먼저 아래는 실제로 내가 오픈 소스를 만들면서 컨텍스트 API를 사용한 코드다. 해당 패턴은 실제로 context를 사용하는 권장 패턴 중 하나에 속한다. import React, { createCo.. 2021. 12. 28. 이전 1 2 3 4 5 다음
