[React] 리액트 개발 팁 / 정리 모음집

머리말

다음은 내가 리액트를 공부하면서 들은 팁, 또는

개발하면서 얻은 팁들을 정리한 것들이다.

당연한 것이라고 생각되는 리액트 상식도 정리할 것이다.

팁 모음집이라고 생각해도, 리액트의 자잘한 정리 모음집이라고 생각해도 좋다.

공부하면서 계속해서 이 글을 업데이트 할 예정이다.

리액트 간단 정리 및 팁

• props로 전달해야 할 함수를 만들 때에는 useCallback을 사용하여 함수를 감싸기

• 리액트 라우터를 사용할땐 태그를 사용하지말고 Link 컴포넌트를 사용하기
  (a 태그를 이용하여 페이지를 이동하면 브라우저에서 페이지를 새로 불러온다)
  (import {Link} form 'react-router-dom';) 

 

• 리액트는 다음의 조건에서 리랜더링이 된다.
  1. 자신이 전달받은 props 변경
  2. 자신의 state 변경
  3. 부모 컴포넌트가 리랜더링
  4. forceUpdate 함수 실행

• vscode 확장프로그램인 ESLint 를 사용하면 js 문법, 코드 스타일을 검사해준다.

• vscode 확장프로그램인 Prettier-Code formatter를 사용하면 코드 스타일을 자동으로 정리해준다.

• 리액트 컴포넌트 분석을 할때 크롬 웹 스토어의 React Developer Tools가 도움이 된다.

• 프로젝트의 코드 스타일을 prettier로 자동으로 정리하고 싶다면
  프로젝트 최상위 디렉토리에 .prettierrc 파일 생성
  [.prettierrc]

 

{
    "singleQuote":true,
    "semi":true,
    "useTabs":false,
    "tabWidth":2,
    "trailingComma":"all",
    "printWidth":80
}

 

• vs Code에서 파일 자동 불러오기 기능을 활용하고 싶다면 최상위 디렉토리에 [jsconfig.json] 생성

{
    "compilerOptions":{
        "target": "es6"
    }
}

 

프로젝트 곳곳에 쓰이는 유틸함수는 보통 src 디렉터리에 lib 디렉터리를 만들고 그 안에 작성

 

리덕스의 상태는 가능한 깊지 않은 구조로 개발한다. (상태의 불변성을 유지하며 데이터의 변화를 일으켜야함)

 

리덕스 스토어를 사용하는 프로젝트에서는 chrome 앱 중 Redux Devtools을 사용할 수 있고,

 

Redux Devtools을 세팅할때는 yarn add redux-devtools-extension을 사용하면 편리하다.

• 계속작성중 . . .