[새싹x코딩온] 웹 개발자 부트캠프 과정 13주차 회고 | React State

1. 들어가며

• 리액트에서 state 사용해보기

2. React State

리액트에서 유동적인 데이터를 유동적인 데이터를 다룰 떄 사용

상태에 따라 다른 동작을 한다.

 

클래스형 컴포넌트의 state

클래스 컴포넌트 내에서 state 로 초기 변수를 지정하고 this.setState() 로 변경되는 데이터 전달

export default class CounterPractice extends Component {
    state = {
        count : 0
    }
  render() {
    const {count} = this.state
    return (
      <div>
        <h1>{count}</h1>
        <button onClick={()=>{this.setState({count : count + 2})}}>+2</button>
        <button onClick={()=>{this.setState({count : count - 1})}}>-1</button>
      </div>
    )
  }
}

 

함수형 컴포넌트의 useState

const [변수명, set변수명] = useState(초기값) 으로 지정

set변수명(값) 으로 변경되는 데이터 값 전달

function CounterPractice2() {
  const [number, setNumber] = useState(0)

  const increase = () =>{
    setNumber(number+1)
  }

  const decrease = () =>{
    setNumber(number-2)
  }
  return (
    <div>
      <h1>{number}</h1>
      <button onClick={increase}>increase</button>
      <button onClick={decrease}>decrease</button>
    </div>
  )
}

export default CounterPractice2

 

함수형 컴포넌트의 useState 를 사용한 곳은 바뀌는 부분만 재렌더링되어 비동기적으로 바뀌는 모습 구현 가능

 

useState를 응용해서 이런식으로 캐릭터를 누르면 해당되는 캐릭터가 보이게 구현가능하다

 

 

 

우선 아래 코드처럼 캐릭터 버튼 컴포넌트와 캐릭터가 보여지는 컴포넌트를 만들었다.

(코드 짤때는 몰랐는데 key 값으로 배열의 index 를 사용하면 나중에 재렌더링할 때 문제가 될 수 있다고 하니 나중에 구현할 때 참고할 것! 지금은 딱히 문제될 것 같진 않아서 index 로 key 값 사용함)

const Villagers = ({villager, click}) => {
  return (
    <ul className='villager-list'>
        {
            villager.map((v,i)=>
                <li key={i} onClick={click}>
                    <figure>
                        <img src={'./image/acnh/'+v.name+'1.png'} alt={v.name}/>
                    </figure>
                    <p data-day={v.birthday}>{v.name}</p>
                </li>
            )
        }
    </ul>
  )
}

const VillagerInfo = ({name, day}) => {
    return(
        <div className='info'>
            <h2>{name}</h2>
            <figure>
                <img src={'./image/acnh/'+name+'2.png'} alt={name}/>
            </figure>
            <p>{day}</p>
        </div>
    )
}

그런 다음 부모컴포넌트에서 이들을 불러오고 props 를 사용해서 데이터 전달해줬다

그리고 useState를 사용해서 클릭 이벤트가 일어날 때 변수값을 변경해줬다.

function App() {
  const villager= [
    {name : '릴리안', birthday : '5월 9일생'},
    {name : '쭈니', birthday : '9월 29일생'},
    {name : '아네사', birthday : '6월 23일생'},
    {name : '리키', birthday : '6월 3일생'},
    {name : '마티', birthday : '4월 16일생'},
    {name : '스파크', birthday : '7월 9일생'},
    {name : '레베카', birthday : '9월 10일생'},
    {name : '미애', birthday : '3월 10일생'},
    {name : '스피카', birthday : '9월 11일생'},
    {name : '미첼', birthday : '5월 19일생'},
]

const [name, setName] = useState('릴리안')
const [day, setDay] = useState('5월 9일생')

const clickVillger = (e) => {
  let vName = e.currentTarget.innerText
  let vDay = e.currentTarget.lastChild.getAttribute('data-day')
  setName(vName)
  setDay(vDay)
}

  return (
    <div className="App">
      <Villagers villager={villager} click={clickVillger}/>
      <VillagerInfo name={name} day={day}/>
    </div>
  );
}

3. 마치며

이전에는 클래스형 컴포넌트에서의 state 를 바꾸는 법을 배우지 않았엇는데 이번에 새롭게 배우게 되어서 신기하다.

(근데 함수형 컴포넌트의 useState 보다 뭔가 헷갈린다..)

프로젝트를 만들때도 계속 함수형 컴포넌트를 이용해서 할 것 같은 느낌이 든다..

 

 

4. Reference

1. 코딩온 강의 교안 및 실습

 

2. https://ko.react.dev/reference/react/useState

useState – React