프론트엔드27 [리액트][함수] 컴포넌트 컨텍스트 & 사이드 이펙트 컨텍스트 컴포넌트 컨텍스트는 각 렌더링 마다 고유한 컨텍스트(스코프)를 가진다. 이걸 어렵게 생각 하지말자 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. [프론트엔드][개발환경]웹팩 & 웹팩 보일러 플레이트 예전에 프론트엔드 개발을 공부할 때 기본적인 html, css, js 등 퍼블리싱부터 이전의 웹 컴포넌트 전의 웹 개발 방식부터 공부했다. 그러다가 리액트, 뷰 등의 모던 웹 개발을 접하면서 기존 웹개발의 경우 html 파일(jsp, php)을 기준으로 js, css 파일 별로 구분을 해서 너저분하게 개발을 하는데 반해 모던 웹개발의 경우 웹 컴포넌트 단위로 쪼개서 깔끔하게 개발을 하는 점에서 코드 재활용성, 코드 품질 향상 및 의존성 관리 등의 점에서 큰 매리트를 느끼게 되었다. 그로 인해서 리액트와 뷰를 공부하기 시작했으나 뷰나 리액트를 제네레이터(vue-cli, create-react-app)로 세팅하는 게 아닌 cdn 방식으로 개발을 하면 기존 웹 개발과 차이가 사실상 거의 없었고 내가 좋다고 느.. 2021. 11. 15. [리액트] 제어 컴포넌트, 비제어 컴포넌트 기술 면접에서 질문 받은 내용, 별로 중요하다고 생각 하지 않던 부분이라 기억이 안났는데, 이게 의미 있는 것 같기도 해서 간단히 정리 해본다. 제어 컴포넌트와 비제어 컴포넌트의 차이 리액트에서 비제어 컴포넌트 와 제어 컴포넌트의 차이는 리액트 라이브러리에서 Form 구현시 어디서 데이터를 다룰지에 따라 달라진다. 제어 컴포넌트의 경우 리액트 컴포넌트(리액트)에서 데이터를 핸들링하고, 비제어 컴포넌트의 경우 기존처럼 DOM객체에서 데이터를 핸들링한다. 가장 핵심적인 차이는 이것이고 사실 이걸 통해서 모든걸 설명 가능하다. 제어 컴포넌트 제어 컴포넌트의 경우 리액트 컴포넌트 자체의 state를 갱신하는 방식으로 동작하기 때문에 폼의 데이터가 항상 최신상태를 유지한다. 다만 그로 인해서 리렌더링이 계속 되고.. 2021. 10. 28. 이전 1 ··· 3 4 5 6 7 다음
