[React] props, state

props

• 일반적으로 데이터는 하나의 컴포넌트에서 큰 덩어리로 가져온다. 이때 부모 컴포넌트에서 자식 컴포넌트로 데이터(값)을 전달할 방법이 필요한데, 이에 props 문법이 활용된다.
• props : 컴포넌트에 지정한 속성 (properties)
• 컴포넌트에 전달된 속성 모두를 props라고 부르며 각각의 속성은 prop이라고 한다.
• props를 이용하면 부모 컴포넌트에서 전달하고자 하는 어떤 값이든 자식 컴포넌트에 전달 가능하다. (문자, 숫자, 변수, 함수 등)
  
  

비구조화 할당 (구조 분해 할당)

props는 객체 형태이므로 props 내의 값을 분리하여 사용하는 객체 비구조화 할당이 쓰인다.

const obj = {name: 'react', color: 'red'}
const {name, color} = obj
console.log(name) //'react'

//실제 적용 예시
import React from 'react'

function Follower({username, email}) {
  return (
    <div className="follower">
        <div className='username'>{username}</div>
        <div className='email'>{email}</div>
    </div> 
  )
}

export default Follower

---

state

state를 사용하기 위해선 먼저 react 패키지에서 useState라는 함수를 불러와야 한다.
import { useState } from 'react';
useState 함수는 파라미터로 초기값을 전달받고, 함수가 실행된 다음에는 배열의 형태로 요소 두 개(state, setter함수)를 리턴한다. 따라서 보통은 아래와 같이 배열의 destructuring 문법으로 코드를 작성한다.

import { useState } from 'react';

function App() {
  const [num, setNum] = useState(1); 
  
export default App;

• state 값 : 배열의 두 요소(num,setNum) 중 첫 번째 요소(num). 쉽게 말해 현재 변수의 값
  처음에는 해당 useState 함수를 호출할 때 전달한 초기값(위 예시 : 1)을 갖고 있다.
• setter 함수 : 배열의 두 요소(num,setNum) 중 두 번째 요소(setNum). setter 함수를 호출할 때 파라미터로 전달하는 값으로 state값이 변경된다.
  state 값의 변경은 직접 해당 변수에 새로운 값을 할당하는 것이 아닌, 반드시 setter 함수를 통해 변경해야 한다. (따라서 변수도 const로 선언)
  cf. setter 함수의 이름은 어떤 것이든 무관하지만 일반적으로 state 이름 앞에 set을 붙인 형태이다.