State & Props & Event

Hooks

React는 useState 같은 내장 Hook을 몇 가지 제공합니다.

Hook을 호출할 때는 최상위 레벨에서만 호출해야 합니다. 그리고 반복문, 조건문, 중첩된 함수 내에서

Hook을 실행하면 오류가 생깁니다.

State

• state는 상태로 단어의 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값입니다.
• state는 화면에 보여줄 컴포넌트의 ui이 정보로 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터를 변경할 수 있습니다.

import React, { useState } from 'react'; //useState를 import 해준다.

function State() {
	const [changeColor, setChangeColor] = useState('red');  //초기값을 red로 정해준다.

	return (
      <div>
        <h1 style=>Function Component | State</h1>
    //Function Component의 색을 초기값인 red로 정하고 버튼을 누르면 blue로 바뀐다.
   <button onClick={() => setChangeColor('blue')}>Click</button>  
   //버튼이 클릭되면 set을 이용해서 색을 blue로 갱신한다.
      </div>
  );
}

export default State;

useState 함수는 컴포넌트 선언문[Function state()]와 return 문 사이에 작성 해야 한다.

배열의 첫번째 요소 changeColor는 상태값이 저장되는 변수이고 setChangeColor는 상태값을 갱신하는 함수입니다.

Props

• 컴포넌트의 속성 값으로 부모 컴포넌트로부터 전달 받은 데이터를 가지고 있는 객체입니다.
• props를 통해서 어떤 값이든 모두 자식 컴포넌트에 전달할 수 있다. [변수, state 값, event handler 등]

//parent.js

import React, { useState } from 'react';  //useState를 import 하고
import Child from '../pages/Child/Child';  //child 컴포넌트를 import 하고 

function Parent() {
  const [color, setColor] = useState('red');  //초기 색을 red로 세팅하고

  return (
    <div>
      <h1>Parent Component</h1>
    //child라는 자식 컴포넌트로 색을 보내고 state 데이터 뿐만 아니고
    // 부모에서 정의한 event handler [changeColor 도 보낼 수 있습니다.]
    <Child titleColor={color} changeColor={() => setColor('blue')} />
    </div>
  );


export default Parent;

//Child.js
import React from 'react';

function Child(props) {  //부모 함수에서 전달받은 데이터가 props에 저장되어 있습니다.
  return (
    <div>
      <h1 style=>Child Component</h1> 
	//titeColor라는 이름안에 color 객체를 넘겨줬기 때문에 props.titleColor로 사용합니다.
  <button onClick={props.changeColor}>Click</button>
	//changColor라는 event handler도 보냈기 때문에 
	//버튼을 클릭하면 () => setColor('blue')가 실행되어 color가 blue로 갱신됩니다.
    </div>
  );
}

export default Child;

프로젝트 예시

  const parentsId = (e) => {
    const targetId = e.target.parentNode.id;
    setArray(array.filter((array) => array.id !== Number(targetId)));
  };

{array.map((comment) => {
                      return (
                        <CommentDetail
                          key={comment.id}
                          name={comment.item}
                          id={comment.id}
                          parentsId={parentsId}
                        />
                      );
                    })}
  

map을 이용해서 commentDetail 컴포넌트에 데이터를 보내고 있는데 parentsId로 함수를 보내고 있다.

function CommetDetail(props) {
  return (
    <li id={props.id} className="review_list">
      <div className="id">coffee_lover</div>
      <div className="review">{props.name}</div>
      <i className={iClass} onClick={changeButton}></i>
      <i className="fa-solid fa-trash-can" onClick={props.parentsId}></i>
    </li>
  );
}
export default CommetDetail;

쓰레기통 아이콘을 클릭하게 되면 부모 함수에 있는 parentsId가 실행되게 되고 parentsId의 정의된 함수가 실행되고 있다.

이벤트가 발생된 곳의 부모노드의 id 값을 받고 이벤트가 발생한 부모노드의 아이디 값과 배열의 아이디 값이 다른 값들만 filter를 이용해서

새로운 배열이 만들어진다. 클릭한 id 값은 같기 때문에 배열에 들어가지 못하고 댓글이 삭제된다.