[URECA] Day 49 React 복기

📌 배운 내용 요약

• useState 훅을 사용해 상태(state)관리하기
• 컴포넌트 분리: Header, InputFild, PostList로 구조 나눔
• 버튼 클릭 이벤트로 상태를 변경하고 화면이 바뀌는 흐름
• props를 통해 자식 컴포넌트로 데이터 전달

---

📃 주요 코드 설명

import React, { useState } from 'react'
import Header from '../components/Header'
import './index.css'
import InputField from '../components/InputFild'
import PostList from '../components/PostList'

export const App = () => {
  const [sample] = useState('test')
  const list = ['송도', '인천', '서울', '부산', '대구', '대전', '광주', '울산']
  const [data, setData] = useState(list)
  console.log('data--', data)

  const changeText = () => {
    console.log('클릭되었다.')
    setData(['변경된 텍스트'])
  }

  return (
    <>
      <button onClick={changeText}>내용 변경</button>
      {*컴포넌트 분리한걸 app.jsx에 작성해서 연결하기*}
      <Header />
      <InputFild />
      <PostList data={data} sample={sample} />
    </>
  )
}

export default App

 const [sample] = useState('test')
  const list = ['송도', '인천', '서울', '부산', '대구', '대전', '광주', '울산']
  const [data, setData] = useState(list)

sample은 PostList에 문자열을 넘긴다.

data는 지역 리스트를 상태로 저장한 배열이다.

화면에는 이 data가 리스트로 렌더링된다.(PostList에서 사용된다.) 

 

  const [data, setData] = useState(list)

➡️ React에서 "상태(state)"를 만들고 초기화한 코드

 

useState(list)

• list는 초기값이다. ex) ['송도', '인천', '서울']
• React는 초기값을 보고 내부적으로 상태를 만들어준다.

그리고 이 useState()는 배열 [현재값, 바꾸는 함수]를 return한다.

const [data, setData] = useState(list)

 

data = 현재 상태 값 (초기 list)

setData = 상태를 바꾸는 함수

 

🤔 그렇다면 setData는 언제 사용할까?

  const changeText = () => {
    console.log('클릭되었다.')
    setData(['변경된 텍스트'])
  }

버튼을 눌러 리스트를 누르고 싶을때 사용된다. 

 

리스트 렌더링 & props 전달

import React from 'react'
import List from './List'

const PostList = ({ data, sample }) => {
  console.log('PostList', data)
  console.log('PostList', sample)
  return (
    <div className="mw">
      <div className="totalcount">
        <strong>TotalCount </strong>
        <span>{data.length}</span>
      </div>
      <ul className="postlist">
        {data.map((list, i) => (
          <List key={i} list={list} />
        ))}
      </ul>
    </div>
  )
}

export default PostList

App.jsx에서 넘겨준 data와 sample을 props로 받는다.

data: 지역 리스트 (['송도', '인천', ...])이다. 

sample: 문자열 'test'로 전달된다. 

 

 <span>{data.length}</span>

 

리스트의 총 수를 표현하고 싶을 때는 의외로 간단하게 .length를 이용하면 된다. 그러면 현재 리스트 항목 수를 보여준다. 

 

 <ul className="postlist">
        {data.map((list, i) => (
          <List key={i} list={list} />
        ))}
      </ul>

 

map() 

배열의 모든 데이터에서 콜백 함수를 호출하고 그 결과를 새 배열에 저장하여 반환한다. 

 

data.map()으로 배열을 순회한다.

하나의 값을 list 컴포넌트에 넘겨 출력한다.

key{i{는 react가 각 항목을 구분할 수 있도록 넣는 고유 값이고 list{list}는 현재 지역을 자식 컴포넌트에 전달한다. 

---

🐛 실습 중 겪은 문제

inputFild 컴포넌트의 CSS가 적용되지 않았다.

한참 이유를 몰라서 삽질하다가 컴포넌트 파일 이름이 inputFild로 잘못적혀있었다.

파일 이름 오타가 CSS 적용이 안되는 문제 중 하나였다.

---

 

⚙️ 해결과정

오타를 발견하고 이름을 InputFild로 수정했더니 정상 작동했다.

앞으로 파일명과 import 경로 명을 더욱 꼼꼼히 살펴봐야겠다.