VS Code에서 리액트 프로젝트를 진행할 때 사소하지만 알면 유용한 꿀팁을 적어보려 한다

📌 Prettier 설정

프로젝트의 최상위 디렉터리에 .prettierrc파일을 생성한 후 다음과 같이 입력해준다

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

📌 components 디렉터리

src 디렉터리 안에 components 디렉터리를 생성해 그 안에 컴포넌트 파일을 저장하자

📌 VS Code 자동 완성 기능

컴포넌트를 import 하지 않고 바로 사용하려고 하면 VS Code에서 자동 완성 기능이 나타난다
하지만 해당 기능은 열려고 하는 컴포넌트가 VS Code에서 다른 탭으로 열려 있지 않으면 작동하지 않는다

닫혀 있는 파일에도 자동 완성이 제대로 작동하려면
1. 프로젝트 최상위 디렉터리에 jsconfig.json 파일을 만든다
2. 해당 파일을 열고 Ctrl + Space를 누른다
3. 파일을 저장한다

📌 좌우 중앙 정렬

width가 주어진 상태에서 다음과 같이 작성하면 좌우 중앙 정렬을 할 수 있다

margin-left: auto; 
margin-right: auto;

📌 flex를 정렬하는 방법

• 수직 정렬 : align-items
• 수평 정렬 : justify-content

🍞 flex 더 알아보기

flex에 대해 더 자세히 알아볼 사람은 여기를 클릭해보자

📌 nth-child 특정 요소 선택하기

🍞 홀수번째 요소에 적용

nth-child(odd)

🍞 짝수번째 요소에 적용

nth-child(even)

📌 useState말고 useRef를 사용할 때

렌더링되는 정보가 아니고, 해당 값이 바뀐다고 해서 컴포넌트가 리렌더링될 필요도 없으면 useState보다 useRef를 사용하는 것이 낫다

useRef로 만든 변수는 단순히 참조되는 값일 뿐이다

📌 useCallback 생활화하기

props로 전달해야 할 함수를 만들 때는 useCallback을 사용해 함수를 감싸는 것을 습관화하자

useCallback으로 감싸주면 컴포넌트의 성능을 아낄 수 있다

📌 onClick이 아닌 onSubmit을 사용하는 이유

onSubmit 이벤트를 사용하면 브라우저의 새로고침을 방지하는 e.preventDefault() 함수를 호출해야 한다

이를 방지하는 또다른 방법으로 onClick 이벤트를 사용하는 것이 있는데, 왜 굳이 onSubmit 이벤트를 사용할까?

그 이유는 onSubmit 이벤트의 경우 input에서 Enter를 눌렀을 때도 발생하기 때문이다

onClick 이벤트를 사용하면 input에서 onKeyPress 이벤트로 Enter를 감지하는 로직을 따로 작성해야하는 번거로움이 존재한다