둘 다 다시 리턴을 해서 UI를 바꿈

Props

리액트에서 props는 속성(property)를 의미한다.
변하지 않는 값에 사용하고 그렇기 때문에 변경할 수 없으므로읽기 전용 객체이다.
콘솔에 props를 찍어보면 정의한 속성을 키와값으로 갖는 객체가 출력된다.
클래스 컴포넌트, 함수형 컴포넌트에서 사용
자식에게 전달해줄 속성을 정의한 뒤 부모에 자식을 불러온다
자식은 매개변수로 props를 가진다. 매개변수의 이름은 상관없으나 일반적으로 props로 쓴다.
prop는 객체이기 때문에 dot-notation을 이용해 {props.속성명} 형태로 사용

function Header(props){ // 매개변수로 props를 준다.
  return (
    <header>
      <h1>{props.title}</h1> // props객체의 키가 title인 요소의 값을 넣음
    </header>
  )
}

function App() {
  return (
  	<div>
    	<Header title='Hello' /> // Header에 전달해줄 속성을 정의
    </div>
  )
}

State

state를 이용해 값을 변경하면 새로고침 없이 재렌더링되기 때문에 컴포넌트 내에서 자주 변경되는 값에 주로 사용한다. on/off 기능이나 카운터, 정렬 기능 등에 적용할 수 있다.

useState()

• useState()는 첫번째 요소로 state값 , 두번째 요소로 state 변경 함수(f)를 갖는 배열을 리턴한다. 초기값을 설정하지 않을 경우, state의 초기값은 undefined가 된다.

import React, { useState } from 'react';

function App(){
  // 초기값X
  console.log(useState()) // [undefined, f]
  
  // 초기값O
  console.log(useState('hello')) // ['hello', f]
}

• useState()가 리턴한 배열의 요소들은 구조 분해 할당을 활용해 변수에 할당될 수 있다.

function App(){
  //구조 분해 할당
  const [ isState, isStateSet ] = useState('hello')
  // 아래와 같다고 볼 수 있다.
  // const isState = 'hello'
  // const isStateSet = 스테이트 변경 함수(f)
}

• state는 직접 변경할 수 없기 때문에 state 변경 함수를 써서 변경해야 한다.

function App(){
  
  const [ isState, isStateSet ] = useState('hello')
  
  return (
    // case1) state 직접 변경 // h1을 클릭해도 hello가 world로 바뀌지 않음 
    <h1 onClick={() => isState='world'}>{isState}</h1>
    
    // case2) state	변경 함수로 변경 // h1을 클릭하면 hello가 world로 바뀜
    <h1 onClick={() => isStateSet('world')}>{isState}</h1>
  )
  
}

• state가 배열이나 객체일 경우 원본 state가 바뀔 수 있기 때문에 값을 변경하기 전 깊은 복사가 필요하다. 배열의 경우 slice() 메서드나 1차원 객체의 경우 spread syntax 등을 이용하여 깊은 복사를 할 수 있다.

function App(){
  
  const [isArr, isArrSet] = useState(['hello', 'world']);
  const copy = [...isArr];
  copy[0] = 'hi';
  console.log(copy) // ['hi', world']
  
  return (
    // h1을 클릭하면 'helloworld'가 'hiworld'로 바뀜
    <h1 onClick={() => isArrSet(copy)}>{isArr}</h1>
  )

}