⚛️Start! React : section10 - 들어가기 앞서

이전 포스팅에서 스스로에게 해봐야 할 것을 내가 적고 마쳤다. 오늘은 다음 수업에 들어가기 앞서서 내가 강의에서 할 실습을 미리 해보았다. 우선 day를 나열 했는데 이를 가지고 동적인 웹페이지를 만드는 것이였다. 우선 li태그안에 button태그를 삽입 해줘야 한다. 이후 해당 버튼을 눌렀을 때 클릭 반응이 있을 수 있게 해줘야한다. Day컴포넌트를 먼저 살펴보면 아래와 같다.

* My_App.js

 

import { useState } from "react"

import Day from "./mycomponent/Day";

import DayList from "./mycomponent/DayList";

import Header from "./mycomponent/Header";

function ClassApp() {

  const [newDay, setDay] = useState()

  // let _day = 0;

  return (

    <div className="App">

      <Header></Header>

      <DayList onClick={(day) => {

        setDay(day);

      }}></DayList>

      <Day day={newDay}></Day>

    </div>

  );

}

export default ClassApp;

* Day.js

 

import dummy from "../db/data.json";

export default function DayList(props) {

  // console.log(dummy)

  return (

    //Key는 반복되는 요소에 고유값을 넣어야해서 필요하다.

    <ul className="list_day">

      {dummy.days.map(day => {  //map함수로 day를 나열 해준다.

        return (

          <li key={day.id}> <button onClick={() => {

            if (props.onClick) {

              props.onClick(day.day); //props로 함수 매개변수 외부로 전달

            }

          }}>Day {day.day}</button> </li>

        )

      })}

      <li></li>

    </ul>

  );

}

우선 Day컴포넌트에 props로 onClick 프로퍼티로 넣어주고 내부(하위) 컴포넌트에서 해당 onClick을 가지고 와서 onClick이 눌렸을 때(if문) 외부(상위) 컴포넌트로 전달해 줄 파라매터를 설정해주는 것이다. 결과적으로 상위 컴포넌트의 파라매터는 day.day값을 가지고 있는 것이다. 그래서 map함수로 나열된 해당 버튼이 눌리면 data에서 day값을 반환하게 된다. 이어서 외부(상위)로 받은 컴포넌트를 어떻게 처리해야하는지 살펴보면 아래와 같다.

import { useState } from "react"

import Day from "./mycomponent/Day";

import DayList from "./mycomponent/DayList";

import Header from "./mycomponent/Header";

function ClassApp() {

  const [newDay, setDay] = useState()

  // let _day = 0;

  return (

    <div className="App">

      <Header></Header>

      <DayList onClick={(day) => {

        setDay(day);

      }}></DayList>

      <Day day={newDay}></Day>

    </div>

  );

}

export default ClassApp;

상위 컴포넌트에서 DayList는 props로 설정한 onClick의 매개변수를 가져오기 위해 함수형 화살표기법으로 가져올 수 있다. 이제 동적으로 값을 변동하기 위해서 useState를 사용해야한다. 해당 onClick안에는 useState의 값을 설정하는 setDay로 새로운 값을 받을 수 있게 하는 것이다. 그렇게 전달된 값은 newDay에 담기게 된다. 그렇다면 날짜 별로 data가 변동되는 Day컴포넌트에는 props의 day로 newDay를 주고 하위 컴포넌트에서 해당 값을 data를 불러오는 부분에 props.day를 주면 오늘 봐야할 영단이 바뀔 것이다. 하위 컴포넌트는 아래와 같다.

* Day.js

import { useState } from 'react'

import dummy from "../db/data.json";

export default function Day(props) {

  const day = props.day;

  const wordList = dummy.words.filter(word => word.day === day);

  return <>

    <table>

      <tbody>

        {wordList.map(word => {

          return (

            <tr key={word.id}>

              <td>{word.eng}</td>

              <td>{word.kor}</td>

            </tr>

          )

        })}

      </tbody>

    </table>

  </>;

}

이제 상위 컴포넌트에서 props로 전달 받은 neweDay값을 day변수에 넣어주면 된다. 여기서 처음에 생각했던 것은 Day컴포넌트도 변동되기 때문에 useState를 사용해야 한다고 생각했다. 하지만 그렇게 값을 주면 re-render에러가 발생한다. 결과적으로 클릭이 가능해서 값을 변동할 수 있는 곳에 useState를 사용하고 해당 useState에 의존하고 있는 하위 컴포넌트들에서는 useState가 불필요 하다는 것이다.

이렇게 혼자 스스로 다음 수업에서 해야할 것들을 미리 작성해 보았다. 다음 포스팅에서는 수업에서 어떻게 코드를 작성했는지 확인 할 수 있을 것이다.