React TIL #2

📂 State & Props

리액트의 핵심!

State

• 각 컴포넌트의 상태이며 컴포넌트가 가지고 관리하는 동적인 값

Props(properties)

• 컴포넌트 속성 설정 시에 사용하는 요소
• 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용
• 가장 기본적이고 효율적

State는 props처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만, props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다는 차이가 있음

📎 props를 사용했는데도 state를 사용하는 이유:
사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜서 양쪽의 편의성을 각자 도모하는 것

✔︎ state를 관리하기 위해 사용하는 hook : useState()

---

📂 UseState()

1. 사용법

1) import {useState}

2) useState(보관할 자료)

3) let[작명, 작명]

useState() 함수를 호출하면 배열을 반환한다.

• 1번째 원소는 현재 상태 값 변수
• 2번째 원소는 상태 값을 갱신해주는 Setter 함수
• useState 괄호 안의 값은 상태의 초기 값

---

📂 UseRef()

ref.current는 value값을 갖게 된다. {current: value}
언제든 원하는 값으로 바꿀 수 있다. ex. ref.current = "hello"

반환된 ref는 컴포넌트의 전 생애주기를 통틀어서 유지가 된다.
즉, 컴포넌트가 계속해서 렌더링되어도 컴포넌트가 언마운트 되기 전까지는 값을 유지한다.

---

📂 UseEffect()

• Mount (화면에 첫 렌더링)
• Update (다시 렌더링)
• Unmount (화면에서 사라질때)

📍위의 상황들에서 특정 작업을 실행시켜 주고 싶다면 useEffect를 사용!

• useEffect(()=>{}): 컴포넌트가 렌더링 될 때마다 실행
• useEffect(()=>{}, []):
  [ ] -> 즉 dependency의 값이 업데이트 될 때만 실행.
  만약 dependency가 빈 배열이라면 컴포넌트가 처음 렌더링 될 때에만(Mount) 실행.