State & Props

• State : 변경가능한 상태. 상위 컴포넌트에서 결정됨. 변경될 때마다 컴포넌트가 갱신됨.
  동적으로 변할 수 있는 값.
  Toggle Switch 의 on/off 나 Coumter 처럼 컴포넌트 내부에서 변할 수 있는 값
  예시 : 장바구니 물품 리스트, 수량, 단일 물품의 포함 여부 체크, 결제할 물품의 수량 및 합계 등.

• Props : 상위 컴포넌트에서 전달받은 데이터(객체 형태로 들어옴.)
  함부로 변경될 수 없는 읽기 전용(read-only) 객체임.(임의로 데이터를 변경할 수 없게 해서 side effect 방지)

• State & Props 적용 예시 : <Child attribute={value} />

function Animal (props) { // Animal 이 Cat 의 하위 컴포넌트가 됨.
    return (
        <h1>Name is {props.name}</h1> {/* 'cat' 출력*/}
    )
}

function Cat() {
    return(
       <h1>
        <Animal name={'cat'} /> //Props 로 { name : 'cat' } 을 전달해줌
       </h1> 
    )
}

+ 참고로 <Child>props 로 전달할 내용</Child> 로도 props 를 전달할 수 있으며 props.children 으로 컴포넌트의 여는 태그와 닫는 태그 사이(HTML content 자리)의 내용을 받아 올 수도 있음. 그러나 {key : value} 형태로 props 를 전달하고 객체의 key 값을 불러오는 것처럼 . , [] 로 불러오는 방식이 많이 쓰인다고 함.

state hook

useState() 사용법

• import { useState } from "react"; 로 불러와주고,
  const [state 저장 변수, state변수를 변경할 함수] = useState(변수의 초기값); 으로 컴포넌트 안에 새로운 state 변수를 선언해 줌
• useState 를 호출하면 배열을 반환함 => [state 저장 변수, state변수를 변경할 함수]
• 중요 : state의 변수를 직접 변경하면 state 의 변경값이 적용되지 않거나 리렌더링이 되지 않음. 상태저장변수를 직접 변경(재할당)하지 않고, 꼭 상태 변경 함수를 사용하여 상태저장변수를 변경해야 함
• +) 상태변경 함수 명 작명 시에는 set을 기본적으로 넣음.

function Check() {
    const [isChecked, setIsChecked] = useState(false);

    function handleClick(event){
        setIsChecked(event.target.checked)
    }

    return (
        <>
            <input type='checkbox' checked={isChecked} onClick={handleClick}></input>
            <span>
                {isChecked
            ? `체크됨(checked === true)`
            : `체크 해제됨(checked === false)`}
            </span>
        </>
    )
}

useEffect() 사용법

=> 추가로 공부할 것!
벨로퍼트 16. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기
useEffect 완벽가이드(번역)

이벤트 처리

• onClick으로 event 함수 받아오기(onClick 으로 함수를 받아올때에는 함수명()이 아닌 함수명만 받아와야 리턴값이 적용되는 것이 아니라 함수 내용이 실행됨(set 함수는 리턴값이 없어서 undefined가 출력됨))
  (input, textarea의 입력값은 입력값이 바뀔때마다 onChange 로 받아옴)
• 이벤트에 함수를 연결하면 자동적으로 인자에 event 가 들어감. event.target은 해당 이벤트가 발생하는 element(요소, 태그)를 지칭함.
  예를 들어 event.target.value 는 해당 요소의 value 속성을 가져오는 것임.

// 
function Animal (props) {
    const [kind, setKind] = useState('unknown')

    function handleClick(event){
        setKind(event.target.value)
    }

    return (
        <>
        <h1>Name is {props.name}</h1>
        <h1>Kind is {kind}</h1>
        <select 
        onClick={handleClick} {/*onClick={()=>{alert.value}} 와 같이 리턴문 안에서 함수를 정의할 수도 있음*/}

            <option value="cat">Cat</option>
            <option value="dog">Dog</option>
            <option value="bird">Bird</option>
        </select>
        </>
    )
}

function Cat() {
    return(
       <h1>
        <Animal name={'cat'} />
       </h1> 
    )
}

React 의 데이터 흐름

• 데이터 흐름 : 하향식
  리액트의 데이터 흐름은 위에서 아래로 단방향 흐름이며, 데이터 흐름을 강제시켜 예측 가능한 코드를 작성하게 유도하여 side effect 를 방지함.
  디버깅 시 아래에서 위로 타고 올라가면서 체크할 수 있게 함.
• 컴포넌트 기반으로 상향식으로 설계해야 함.

State 결정 기준 3가지 :

1. 부모로부터 props를 통해 전달되면 state 가 아님.
2. 변하지 않는 상태는 state 가 아님.
3. 컴포넌트 내에서 다른 state 나 props 를 가지고 계산이 가능하면 state 가 아님.

• 여러개의 자식 컴포넌트가 하나의 state 를 받아올 때는, 두 자식 컴포넌트의 공통된 부모 컴포넌트에서 state 를 받아와야 함.

기타

• <React.Fragment> === <> 랑 같은 역할을 함(요소들을 최상단에서 묶어주지만 DOM 에는 나타나지 않음)
• key 값을 주려면 map 안에 넣어줘야 적용됨
• class 는 몇년 전까지 사용하던 방법, React 16.8 버전에 Hook이 추가되면서 클래스 컴포넌트를 작성하지 않아도 state를 사용할 수 있게 됨.