[React] Props, State

Props

Property의 줄임말로 외부 컴포넌트로부터 받은 데이터를 말한다.

• 객체 형태를 띄고 있다. { key : value }
• Read-only (수정 불가)

Props 사용하기

Parent 컴포넌트에서 Child 컴포넌트로 값을 전달해보자.
1. 전달하고자 하는 값의 속성(attribute, 내가 마음대로 이름을 정할 수 있음)을 정의하여 값을 넣어주는 방법과
2. 태그 사이에 값을 넣고 props.children으로 받는 방법이 있다.

let name = "Steve Jung"
const Parent = () => {
  return (
    <Child attribute1={name}/> // -- 1
    <Child>{name}</Child> // -- 2
  )
}

const Child = (props) => {
  return(
    <p>{props.attribute1}</p> // -- 1
    <p>{props.children}</p> // -- 2
  )
}

State

컴포넌트 내부에서 변할 수 있는 상태값 (체크박스 등).
모든 데이터를 상태로 둘 필요는 없다. 최소화하는 것이 좋다. 왜냐하면 상태가 많아질수록 앱이 복잡해지기 때문이다.

어떤 데이터를 상태로 두어야 하는지 여부는 다음 세가지 질문을 통해 판단할 수 있다.

1. 부모로부터 props 를 통해 전달되는가? 그럼 state 가 아니다.
2. 시간이 지나도 변하지 않는가? 그럼 state 가 아니다.
3. 컴포넌트 안의 다른 state 나 props 를 가지고 계산이 가능한가? 그럼 state 가 아니다.

useState() 함수를 사용하여 state 다루기

// useState() 호출
const [isChecked, setIsChecked] = useState(false);
// const [state 저장 변수, state 갱신 함수 ] = useState(변수 초기값)

// event handler 함수
const handleCheck = (event) => {
  setIsChecked(event.target.value);
}

return(
  <div>
    <input type="checkbox"
           checked={isChecked}
           onChange={handleCheck} // event handler 지정
    ></input>
    <span>{ isChecked ? "Checked" : "Not Checked" }</span>
  </div>
)

이벤트 핸들링 HTML vs React

<button onclick="isChecked()">abc</button>

<button onClick={isChecked}>abc</button>
// 이벤트는 camelCase, {}를 이용하여 핸들러 함수 전달

자주 사용되는 이벤트 처리

• onChange : <input>, <textarea>, <select>, 와 같은 폼(Form) 엘리먼트의 이벤트 함수 전달에 쓰며, input 의 텍스트가 바뀔 때마다 발생한다.
• onClick 등
  
  

React 데이터 흐름

React 에서 데이터는 props를 이용해 부모에서 자식 component 로 전달된다. 즉 하향식 (top-down) 이다.