[React] State and Props + 이벤트핸들링

🏷 state란?

• 변할 수 있는 값
• '상태'
• 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값
• 클래스 컴포넌트뿐만 아니라 함수형 컴포넌트에서도 사용할 수 있음.
• 하위 컴포넌트에서도 존재할 수 있음
• 리액트가 화면을 rerendering해야할 때를 파악하는 기준

++React 16.8 버전에 Hook이 추가되면서 클래스 컴포넌트를 작성하지 않아도 state를 사용할 수 있게 되었다.

++react가 state를 통제할 수 있는 컴포넌트를 Controlled Component라고 한다.

---

📥  props란?

• 외부(부모 컴포넌트)로부터 전달 받은 값
• React 컴포넌트는 javaScript 함수와 클래스로, props를 함수의 전달인자처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환
• 따라서, 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용 가능
• 객체 형태임
• 읽기전용임 read-only (변화지 않음,immutable)
• 클래스 컴포넌트뿐만 아니라 함수형 컴포넌트에서도 사용할 수 있음.
• 여러개 지정 가능

---

⚔️ props vs state

 

	props	state
차이	-변하지 않는 외부(부모 컨포넌트)로부터 전달받은 값	-내부에서 변화하는 값
예시	이름,성별	나이,현재 사는 곳,취업여부,결혼/연애 여부,

---

 

💡props사용법 01:  attribute:{value}로 넣어 전달

 

1. 부모 컴포넌트에서 자식 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text={"I'm Chilldev"} />
    </div>
  );
};

부모 컴포넌트에서 attribute:{value}를 정의한다.

value는 꼭 중괄호를 사용해서 전달하고자 하는 값을 감싸준다.

 

 

2.자식 컴포넌트에서 인자로 props를 정의하여 부모로부터 정의된 값과 속성을 받아온다.

그리고 props를 받아서 사용할 자식 컴포넌트에서 props를 받아서 사용한다.

이때 props는 객체임을 명심!

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

 

3. 전달받은 props를 dot notation을 활용하여 렌더링한다.

props 객체는 부모 컴포넌트에서 정의한 attribute:{value}를 {key:value} 형태로 갖고 온다.

때문에 value에 접근할때 객체처럼 dot notation을 사용하여 접근할 수 있다.

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

//🛑혹은 아래와 같이 구조분해할당으로 쓸 수 있다.
//이 방법을 더 많이 쓴다.
//function Child({text}) {
//  return (
//    <div className="child">
//    	<p>{text}</p>
//    </div>
//  );
//};

 

💡 props사용법 02:  여는 태그와 닫는 태그 사이에 value넣어 전달

 

1. 부모 컴포넌트에서 자식컴포넌트를 넣을 때, 여는 태그와 닫는 태그 사이에 value를 넣는다.

 

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child>I'm Chilldev</Child>
    </div>
  );
};​

2. 자식 컴포넌트에서 인자로 props를 정의하여 부모로부터 정의된 값과 속성을 받아온다. (방법01과 동일)

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

3.전달받은 props를 children키값으로 가져온다.

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

---

⚙️ useState란?

• useState는 React에서 state를 다루기 위해 제공되는 함수이다.
• useState를 호출하면 리액트에 의해 해당 변수가 state 변수로 진화한다.
• state변수는 보통의 변수와 다르게 함수가 끝나도 사라지지 않는다.

---

💡 useState사용법

 

1. React로부터 useState import시키기

import { useState } from "react";

 

2. useState를 컴포넌트 안에서 호출하기

//📌방법01)구조 분해 할당으로 적기
function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);
}

//📌방법02)풀어적기
function CheckboxExample() {
  const stateHookArray = useState(false); // 2번
  const isChecked = stateHookArray[0];
  const setIsChecked = stateHookArray[1];
}

🛑 useState를 호출하면 배열을 반환한다.

이 배열의 0번째 요소는 현재 state변수이고, 1번째 요소는 이 변수를 갱신할 수 있는 함수이다.

그리고 useState()괄호 안에 인자로 넘겨주는 값은 state의 초깃값이다.

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

 

3. JSX에서 불러서 사용하기

<span>{isChecked ? "Checked!!" : "Unchecked"}</span>

---

🛎 state 갱신하기

 

react는 컴포넌트의 state가 갱신될 때마다 해당 컴포넌트를 자동으로 rerender한다.

state를 갱신만해주면, 일일이 화면을 다시 띄우라고 명령하지 않아도 알아서 그 부분만 바꿔주는 것!

 

state를 갱신하려면 state변수를 만들 때 배열의 두번째 요소로 할당해줬던 state 갱신 함수(상태 변경 함수)를 호출한다.

state갱신함수는 인자로 새로 갱신할 값을 받는다.

 

🛑 React state는 꼭 상태 변경 함수 호출로 변경해야 한다. (강제로 변경 시도❌)

이건 react의 약속! 상태 변경함수(state갱신함수)로 state를 변경해야만

state가 제대로 변경되고 > react가 똑똑하게 화면을 리랜더링 할 수 있다. (이러려고 react쓰는 건데!)

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

  const handleChecked = (event) => {
    setIsChecked(event.target.checked); //2️⃣이벤트 함수 안에서 state갱신 함수 호출하기 //인자는 갱신될 state값
  };

  return (  //3️⃣(React가 알아서)isChecked 현재 state를 변경되었음을 인식 -> 변경된 컴포넌트 다시 랜더링
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} /> //1️⃣이벤트 함수 걸어주기
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

---

🎈 이벤트핸들링

• onchange,onclick ❌ -> onChange,onClick⭕️와 같이 카멜케이스로 적어줘야한다.
• 이벤트 핸들러는 중괄호{}로 감싸 함수자체의 형태로 전달해야한다.(호출❌)

//---------❌---------

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

//---------⭕️---------

<button onClick={handleEvent}>Event</button>
//카멜 케이스(camelCase) 사용
//문자열이 아닌 {함수}로 이벤트 처리 함수(이벤트 핸들러; Event handler)를 전달

---

🎈 state 갱신+ 이벤트핸들링

• state를 갱신하는 이벤트 핸들러 함수를 정의할 때에 arrow function을 사용한다.

화살표 함수를 사용해야 해당 컴포넌트가 가진 state에 접근할 수 있기 때문!

 

//---------❌ 🙅🏻‍♀️ ❌---------

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

 function handleChange (e){
    setName(e.target.value); //❗️화살표함수를 사용하지 않아 state에 정상적으로 접근할 수 없다.
  }
  
  const handleClick = () => {
  alert(name);
  };

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={alert(name)}>Button</button> 
      <h1>{name}</h1>
    </div>
  );
  //❗️함수()를 바로 넣어주면 함수의 결과값이 걸려 이벤트핸들러가 정상적으로 작동하지 않는다.
  //onClick=undefined와 같다.
};

//---------⭕️ 🙆 ⭕️---------

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

  const handleChange = (e) => {
    setName(e.target.value); //화살표함수를 사용하여 state에 정상적으로 접근할 수 있다.
  }
  
  const handleClick = () => {//리턴문 외부에서 함수를 정의한 후 이벤트에 전달하기
   alert(name);
  };

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={handleClick}>Button</button>
      <h1>{name}</h1>
    </div>
  );
  //함수를 리턴하는 함수 자체를 전달(호출하지 말고)했기 때문에
  //렌더링할 때 함수의 결과값이 아닌, 함수 자체를 정상적으로 호출할 수 있다. 
      
  //또는아래와 같이 외부함수 정의없이, 화살표함수로 감싸 적는 것도 가능하다.
  //<button onClick={() => alert(name)}>Button</button>
};

---

🫣관련글

[React] state 쓰는 법