고래강이네 고래강이네

구버전/React

• [React] 새로운 리액트 문서에서 제시하는 9가지 권장 사항

  구버전/React 2023. 12. 6. 11:26

  출처: https://blog.testdouble.com/posts/2023-10-16-react-docs-recommendations/ 개요 9가지 권장사항 권장사항 반복문에 key에 index 넣지마라 컴포넌트 정의할 때 중첩으로 사용하지마라 state 남발하지마라 꼭 필요한 상황에서 최소한으로 사용해라 useMemo, useCallback, React.memo 남발하지마라 "use" 접두사 사용하는 것을 남발하지마라 useEffect 를 올바르게 사용하자 프로퍼티 변경에 따라 상태를 조정해야한다면 사용하지마라 데이터 페칭은 useEffect보다 라이브러리가 낫다 이벤트 발생에 대한 응답으로 어떠한 액션을 취한다면 useEffect를 사용하지말고 핸들러에 코드를 작성해라 useEffect 종속성을 생..

  Read More
• [React] Suspense

  구버전/React 2023. 11. 22. 15:42

  개요 Suspense의 개념 및 동작방식 Usages Suspense React에서 무언가를 기다릴 때 사용한다. (children이 로딩되기 전에 fallback을 보여준다) useEffect의 단점) UI폭포(Waterfall)를 발생한다(상위 컴포넌트의 데이터부터 UI가 순차적으로 나타나는 것) 초기랜더링 이후 발생하는 사이드 이펙트로, 데이터 로딩이 끝나면 리랜더링을 수행하기에 Race Condition에 취약 이러한 단점을 보완해주는 Suspense 예시) fallback에는 실제 UI가 로딩이 끝날 때까지 대신 보여줄 컴포넌트를 넣어준다 (스피너, 스켈레톤...) 컨텐츠를 보여준 후 다시 suspend상태에 들어가게 되면 다시 fallback을 보여준다. 동작방식) 위와 같은 구조의 트리에서 ..

  Read More
• [Hooks] useEffect

  구버전/React 2023. 11. 22. 14:19

  개요 useEffect와 필수개념 useEffect의 실행순서 부가정보 useEffect side effect를 별도로 처리하기 위해서 사용하는 Hook으로 매번 컴포넌트가 렌더링 될 때 특정 조건에 의해 작업을 실행하며 컴포넌트가 순수 함수를 유지하도록 도와주는 함수 Side effect) 함수 내 특정 동작이 함수 외부에 영향을 끼쳐, 프로그램의 동작을 이해하기 어렵게 만드는행위 서버와의 통신 setTimeOut, setInterval React 외부와 상호작용 순수함수와 참조 투명성) 순수함수란 입력에 대해 항상 같은 결과를 반환해주는 함수로 외부와 관련이 없어 영향을 주지 않는 함수, 이러한 함수들은 참조에 투명하다고 하며 React에서 사용을 권장한다 재사용성의 증가와 예측 및 테스트가 쉽다 /..

  Read More
• [Article] React 렌더링 동작에 대한 (거의) 완벽한 가이드(1편)

  구버전/React 2023. 11. 21. 21:05

  개요 랜더링이란? React의 랜더링방식 랜더링 성능 개선 Context와 랜더링 동작 Redux와 랜더링 동작 React의 향후 개선사항 기타 랜더링이란? 현재 porps 및 상태를 기반으로 React가 컴포넌트에게 UI영역이 어떻게 보이길 원하는 지 설명을 요청하는 프로세스 랜더링 프로세스) 프로세스동안 React는 컴포넌트 트리의 루트에서 시작해서 업데이트가 필요한 모든 컴포넌트를 찾기 위해 아래로 순회한다. 컴포넌트 랜더 출력은 일반적으로 JSX구문으로 작성되며 Javascript가 컴파일되고 React.createElemet()를 통해 createElement라는 DOM객체와 유사한 객체로 반환된다. 이후 재조정을 통해서 업데이트 내용을 수집하여 DOM요소에 딱 한번 적용시켜 업데이트 내용을 반..

  Read More