TIL 20: React 기초 - State & Props

삼일간 나눠서 리액트 기초를 배웠습니다!

하루에 모든 내용을 배우지 않으니깐 배웠던 내용들이 유기적으로 연결이 되지 않는 것 같아서 주말에 마저 한번 쭉 훑어보려고 합니다.

게다가 담주에 HA있어서 이외의 내용들도 더 공부해야 할 것 같아요!

그래서 주말이...없어질 것 같습니다ㅠ

일단 오늘은 State와 Props에 대해 간단하게 정리해보겠습니다.

 

크게 보면 State는 변화하는 속성일 때 사용하고, Props는 변화하지 않는 속성일 때 사용합니다.

 

State

State의 장점으로는 데이터가 변경되면 HTML이 자동으로 재렌더링 됩니다.

즉, 새로고침 안해도 알아서 스무스하게 잘 렌더링이 됩니다.

state 데이터를 관리하기 위해서는 useState라는 함수를 사용할 수 있습니다.

import { useState } from "react"; //상단에 useState를 불러온 후
function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false); 
  const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);
   //위 두 줄의 뜻은 같습니다.

 

React state는 강제로 변경을 시도하면 안 됩니다.

deep copy를 통해 데이터를 수정해야 합니다.

 

 

Props

Props는 상위 컴포넌트로 부터 전달받은 값입니다.

형태는 객체 형태입니다.

그리고 앞서 말했듯이 State와 달리 함부로 변경되기 어렵습니다.

Props를 사용하기 위해서는 크게 세가지 단계로 나뉘어집니다.

1. 하위 컴포넌트에 전달하고자하는 데이터를 정의합니다.

<Child attribute={value} />

2. Props를 이용해서 데이터를 전달합니다.

3. 전달받은 Props를 렌더링합니다.

function Child(props) {
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
};

 

 

이벤트 핸들링

DOM에서의 이벤트 핸들링과 비슷합니다.

대신 React에서는 이벤트를 소문자 대신 카멜 케이스를 사용합니다.

JSX를 사용하여 문자열이 아닌 함수로  이벤트 처리 함수를 전달합니다.

onClick, onChange, select 등이 있습니다.

이벤트 핸들러는

1. useState를 통해 변수와 갱신함수를 가져오고,

2. 갱신함수를 el.target.value에 적용하기 위해 변수에 할당해준 후,

3. return 문에 사용할 수 있습니다.

function NameForm() {
  const [name, setName] = useState(""); // 1. useState를 통해 변수와 갱신함수 가져오기

  const handleChange = (e) => {
    setName(e.target.value);
  } // 2. el.target.value 변수 할당하기

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <h1>{name}</h1>
    </div>
  )
}; // 3. Return문에 이벤트 핸들러 적용하기