React - State & Props

Props

외부로부터 전달 받은 값

 

How to use props

1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다.

2. props를 이용하여 정의된 값과 속성을 전달한다.

3. 전달받은 props를 렌더링 한다.

 

function Parent() {

  return (

    <div className="parent">

      <h1>I'm the parent</h1>

      <Child text={"I'm the eldest child"} /> 

    </div>

  );

}

function Child(props) {

  console.log("props : ", props); // {text : "I'm the eldest child"}

  return (

    <div className="child">

      <p>{props.text}</p>

    </div>

  );

}

export default Parent;

 

 

 

State

내부에서 변화하는 값

 

useState 사용법

React에서는 state를 다루는 방법 중 하나로 useState라는 특별한 함수를 제공한다.

useState를 이용하기 위해서는 React로 부터 useState를 불러와야 한다.

import { useState } from "react";

이후 useState를 컴포넌트 안에서 호출해 준다. useState를 호출한다는 것은 "state"라는 변수를 선언하는 것과 같다. 일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않는다. 

function CheckboxExample() {
  const [ state 저장 변수, state 갱신 함수 ] = useState(state 초기값);

완성된 체크박스 컴포넌트 예시

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

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

 

 

React에서의 이벤트 처리

<button onClick={handleEvent}> Event </button>

참고로 HTML에서의 이벤트 처리의 방식은 아래와 같다

<button onclick="handleEvent()"> Event </button>

 

onChange

<input> <textarea> <select>와 같은 폼(Form) 엘리먼트는 사용자의 입력값을 제어하는 데 사용된다. React에서는 이러한 변경될 수 있는 입력값을 일반적으로 컴포넌트의 state로 관리하고 업데이트한다. onChange 이벤트가 발생하면 e.target.value를 통해 이벤트 객체에 담겨있는 input 값을 읽어올 수 있다. 컴포넌트 return 문 안의 input태그에 value와 onChange를 넣어준다. onChange는 input의 텍스트가 바뀔 때마다 발생하는 이벤트이다. 이벤트가 발생하면 handleChange 함수가 작동하며, 이벤트 객체에 담긴 input 값을 setState를 통해 새로운 state로 갱신한다.

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <h1>{name}</h1>
    </div>
  )
};

 

 

 

 

onClick

사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트이다. 버튼이나 <a> tag를 통한 링크 이동 등과 같이 주로 사용자의 행동에 따라 애플리케이션이 반응해야 할 때 자주 사용하는 이벤트이다.

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={alert(name)}>Button</button>
      <h1>{name}</h1>
    </div>
  );
};

위에 예시에 버튼을 추가하여 버튼 클릭시 input tag에 입력한 이름이 alret를 통해 알림창이 팝업 되도록 코드를 추가해 보았다. onClick 이벤트에 함수를 전달할 때는 함수를 호출하는 것이 아니라 아래와 같이 리턴문 안에서 함수를 정의하거나, 리턴문 외부에서 함수를 정의 후 이벤트에 함수 자체를 전달해야 한다.

// 함수 정의하기

return (
  <div>
	...
    <button onClick={() => alert(name)}>Button</button>
	...
  </div>
  );
};

// 함수 자체를 전달하기

const handleClick = () => {
  alert(name);
};

return (
  <div>
      ...
    <button onClick={handleClick}>Button</button>
      ...
  </div>
  );
};