실수 노트

4. 리액트 폼

controlled 방식은 리액트가 선언형으로 관리한다는 말이다. 간혹 작업 중 이를 잊어버리고 비 선언형 방식(DOM 이벤트)를 사용해서 컨트롤하려고 하는데 이를 조심하자.

3. classNames

const AppButton = ({ handleNav, className, ...restProps }) => {
const buttonClassNames = classNames('resetButton', className) [O]
// className을 객체로 전달하지 않는다. 
const buttonClassNames = classNames('resetButton', {className}) [X]

2. Context에서 자주하는 실수

2.1 Provider 설정

<React.Provider>이란 것은 없다.

import Data from '~/context/Context'

<React.Provider></React.Provider> [X]
<Data.Provider></Data.Provider> [O]

2.2 value 내보내기

context를 받아올 때 가끔 받아온 값이 없다고 뜨는 경우가 있다 이 경우 Provider로 value를 전달 했는지 확인하자

1.import 불러오기

json 데이터를 불러오는 경우 named로 불러오지 않고 default 방식으로 불러온다.

import data from '~/api/ediya.json' [O]
import { data } from '~/api/ediya.json' [X]