본문 바로가기

리액트12

[리액트][함수] 컴포넌트 컨텍스트 & 사이드 이펙트 컨텍스트 컴포넌트 컨텍스트는 각 렌더링 마다 고유한 컨텍스트(스코프)를 가진다. 이걸 어렵게 생각 하지말자 for(let int = 0; int < n; int++){ 컨텍스트(scope)} 에서 매 반복마다 int가 각각 다른 값인 것과 같다. 1.useEffect 훅의 경우 미래는 모르겠지만, 현재는 리액트 컴포넌트 사이클 외부에 해당한다. 그래서 내부에서 리액트 훅을 사용 할 수 없다. 내부 컨텍스트를 최신화 하기 위해서 [deps]로 변경 되는 모든 변수를 넣어주자. 또 클린업 함수를 신경쓰자. 2. useRef를 통해서도 가능하지만 사이드 이펙트 수준을 넘어서 비제어화 하니 최대한 안쓰는게 좋다. 3. useCallback을 적절히 사용하자. 4. useMemo로 최적화 해야 할 상황이 왔다면 코드를 잘.. 2022. 1. 21.
[리액트] 제어 컴포넌트, 비제어 컴포넌트 기술 면접에서 질문 받은 내용, 별로 중요하다고 생각 하지 않던 부분이라 기억이 안났는데, 이게 의미 있는 것 같기도 해서 간단히 정리 해본다. 제어 컴포넌트와 비제어 컴포넌트의 차이 리액트에서 비제어 컴포넌트 와 제어 컴포넌트의 차이는 리액트 라이브러리에서 Form 구현시 어디서 데이터를 다룰지에 따라 달라진다. 제어 컴포넌트의 경우 리액트 컴포넌트(리액트)에서 데이터를 핸들링하고, 비제어 컴포넌트의 경우 기존처럼 DOM객체에서 데이터를 핸들링한다. 가장 핵심적인 차이는 이것이고 사실 이걸 통해서 모든걸 설명 가능하다. 제어 컴포넌트 제어 컴포넌트의 경우 리액트 컴포넌트 자체의 state를 갱신하는 방식으로 동작하기 때문에 폼의 데이터가 항상 최신상태를 유지한다. 다만 그로 인해서 리렌더링이 계속 되고.. 2021. 10. 28.
펫링크 마이그레이션 후기 펫링크 마이퍼피 펫링크 관련 설명. 인수인계 및 리팩토링시 참고해서 진행바랍니다. 기술 구성 해당 프로젝트는 기존의 PHP 코드 이그나이트, 부트스트랩, 제이쿼리 기반, 멀티페이지 어플리케이션을 리액트로 마이그레이션 진행한 프로젝트입니다. 프로젝트 환경 설정 과정에서 개인적으로 작성한 웹팩 템플릿을 사용했습니다. 적용된 기술스택: React, TypeScript, Axios, Redux, Redux-saga, Bootstrap(react), C3, React-hook-form, React-quill, React-select, React-tooltip, Signature_pad, Styled-components, React-circular-progressbar, React-daumpost-hook, Web.. 2021. 7. 8.
프론트엔드 설계 및 디자인 패턴 프론트엔드를 혼자 공부하고 개발하면서 개인적으로 효율적이라고 생각하고 만든 구조중 하나입니다. CSR 기준으로 되어 있습니다. # 리액트 & 웹팩 설정 ### 루트 1. root - 패키지 매니저, 깃, 웹팩, 기타 플러그인 설정이 위치한다. 2. build - 웹팩 세부 설정 & 플로그인등 셋팅이 존재한다. 3. public - 정적파일 보통 index.html이 존재한다. 4. src - 개발한 모든 소스가 존재한다. 5. dist - 웹팩을 통해서 빌드된 프로덕트 소스가 존재한다. 6. etc - types, .storybook 등 폴더가 선택적으로 존재한다. ### SRC 1. assets - 정적 리소스, img나 웹폰트등이 존재한다. 경우에 따라서 css나 js 파일도 있을 수 있다. 2. c.. 2021. 6. 28.

티스토리툴바