React 9일차

Lifting state up (상태 끌어올리기)

부모 컴포넌트는 자식에게 props(속성)를 전달할 수 있고
자식은 부모에게 props를 받아 상태를 표현할 수 있다.

하지만, 자식은 props를 변경할 수 없다.
또한, 형제끼리도 props를 주고 받을 수 없다.

형제끼리 상태를 동기화 시키려면?

상태를 상위(부모)로 올리면 된다. (Lifting state up)

이렇게 하면

• 자식 컴포넌트들 상태 동기화 가능
• 각 자식 컴포넌트에게 상태 관리를 맡길 필요없어 유지보수성↑, 코드 간결↑
  
  

[ 사용법 ]

1. 부모 컴포넌트는 props로 상태변경함수를 전달
2. 자식 컴포넌트는 props로 전달받은 상태변경함수에 해당 요소를 구분할 수 있는 정보(ex. index)를 넣어 실행

실습1. Accordion 예제

import { useState } from 'react'
import classes from './Accordion.module.css'

// 부모
export default function Accordion() {

  const [openIndex, setOpenIndex] = useState(0);
  const handleShow = (idx) => {
    setOpenIndex(idx);
  }

  return (
    <div>
      <h2>상태 끌어올리기</h2>
      <div className={classes.container}>
        <Btn handleShow={handleShow} idx={0} openIndex={openIndex === 0} />
        <Btn handleShow={handleShow} idx={1} openIndex={openIndex === 1} />
      </div>
    </div>
  )
}

// 자식
function Btn({ handleShow, idx, openIndex = false }) {
  return (
    <div>
      <button type='button' onClick={() => handleShow(idx)}>
        {openIndex ? '닫음' : '열림'}
      </button>
      {openIndex ? <p>아코디언 {idx}</p> : null}
    </div>
  )
}

실습2

import classes from './Tab.module.css';
import data from './../data/newjeans.json';
import { useState } from 'react';


export default function Tab() {

  const [open, setOpen] = useState(0);
  const handleOpen = (idx) => {
    setOpen(idx)
  }

  return (
    <>
      <div className={classes.container} role='group'>
        {
          data.map((item, index) => {
            return (
              <Button key={item.id} item={item} handleOpen={handleOpen} index={index} />
            )
          })
        }
      </div>
      <figure>
        <img src={data[open].imgURL} alt={data[open].name} />
        <figcaption className={classes.sr_only}>{data[open].name}</figcaption>
      </figure>
    </>
  )
}

function Button({ item, handleOpen, index }) {
  return (
    <button className={classes.btn} onClick={() => handleOpen(index)}>{item.name}</button>
  )
}

---