> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/til/undefined.md).

# 실수 노트

## 4. 리액트 폼 

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

## 3. classNames 

```javascript
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>`이란 것은 없다.&#x20;

```javascript
import Data from '~/context/Context'

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

#### &#x20;2.2 value 내보내기&#x20;

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

## 1.import 불러오기&#x20;

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

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