React - setState

React의 데이터 흐름

리엑트의 데이터 흐름은 단방향 입니다.

즉, 부모에서 자식으로만 전달이 가능합니다!

그래서 props는 부모 컴포넌트가 자식 컴포넌트에게 물려주는 변수/함수 입니다.

 

props driling

props가 자식에게 넘겨주는 단계가 두단계 이상될 경우를 props drilling이 일어났다 라고 합니다.

props drilling은 과도하지 않으면 괜찮지만, 과도하게 이루어지면 해당 props가 어디서 내려지고 있는지 찾는것이 굉장히 난해해집니다.

따라서 최대한 drilling이 안일어나게 해주는것이 코드의 가독성과 유지보수 면에서 유리합니다.

방지하기 위해선 global state를 이용하는것이 좋습니다.

state 리렌더

setState는 비동기로 작동 합니다.

setState가 동기로 작동하게되면 변경될때마다 바로 바로 렌더링을 하기 때문에 비효율 적입니다.

따라서 임시 저장소에 모아두었다가 코드를 끝까지 읽고 한번에 바꿔서 렌더링을 합니다.

const onChangeContents = (event) => {
        setContents(event.target.value)

        // 함수는 다 실행되고 변경 되니까 지금 입력한 값으로 해주면 바로된다
        // 임시저장 공간에 저장해놓고 함수가 끝날때 수정해준다.
        if (writer && title && event.target.value){
            setIsActive(true)
        }
    }

위의 함수에서 event.target.value로 해준 이유는 함수가 끝나기 전에 if문을 바로 충족해서 검사하기 위해서 입니다.

 

리렌더가 되는 상황

1. 새로운 props가 들어올 때

2. 부모 컴포넌트가  렌더링 될 때

3. 강제 업데이트가 실행될 때

4. state가 변경될 때

```jsx
export default function stateTest(){
const [value,setValue]=useState(0)

const onClick = () => {
    setValue(value+1)
    setValue(value+1)
    setValue(value+1)
  }

  return (
    <div className="App">
      <button onClick={onClick}>+</button>
      <h1>{value}</h1>
    </div>);
}
```

다음 코드를 실행하면 1이 출력된다.

이유: setState가 비동기적 특성을 갖기 때문입니다.

 

컴포넌트 안에서 router 사용시 주의점

router.query 가 반드시 페이지 안에서만 사용되는건 아닙니다.

라우터가 연결된 모든 컴포넌트에서 사용이 가능합니다.

따라서 페이지 컴포넌트에서도 가능하지만, BoardDetail 컴포넌트에서도 사용이 가능합니다.

 

router 사용시 주의할 점

라우터가 있는 컴포넌트를 재사용 할 때 다이나믹 라우팅 폴더[qqq]가 있는지 잘 확인하고 재사용 해야합니다.

폴더가 없는곳에 router.query를 가지고 가면 오류가 발생 합니다.

 

주소를 설계하는 법

- 게시물 목록, 게시물 등록, 다이나믹 라우팅 표기, 게시글 수정하기 주소

게시물 목록: /board

게시물 등록: /board/new

다이나믹 라우팅(특정 게시물 조회)

/boards/:id > :으로 표기

/boards/{id} > {}으로 표기

게시물 수정하기

/boards/:id/edit

/boards/{id}/edit

수정은 특정 게시물을 수정하는 것이기 때문에 특정 게시물의 id를 다이나믹 라우팅을 해줘야 합니다