[코드숨] 리액트 13기 -2강/ 과제1-Counter 앱 만들고 파일 분리하기

 

useState에 객체로 쓰고 싶지 않았음

  const [state, setState] = useState({
    count: 0,
  });
  
  const { count } = state;
  
  //{count}는 객체에서 count를 의미

 

아래와 같이 코드 작성

 const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  function handleClickNumber(value) {
    setCount(count + value);
  }

 

ex

let object ={
    a : "aaaa"
};
// const a = object.a; 기존 javascript 문법
const {a} = object;

https://sang12.co.kr/228/const-%7B%7D-%3D-props-es6-%EB%AC%B8%EB%B2%95-%EA%B5%AC%EC%A1%B0%EB%B6%84%ED%95%B4%ED%95%A0%EB%8B%B9%28Destructuring-assignment%29%EC%9D%B4%EB%9E%80

const {} = props es6 문법 구조분해할당(Destructuring assignment)이란

 

const {} = props es6 문법 구조분해할당(Destructuring assignment)이란

 

---

<과제 수행 1제출>

폴더 정리

 

src>App.jsx

import React, { useState } from 'react';
import CounterPage from './pages/CounterPage';

function App() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  function handleClickNumber(value) {
    setCount(count + value);
  }

  return (
    <CounterPage
      count={count}
      onClick={handleClick}
      handleClickNumber={handleClickNumber}
    />
  );
}

export default App;

 

src>index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('app'),
);

 

src>components>buttons>Buttons.jsx

import React from 'react';
import Button from './Button';

function Buttons({ onClick }) {
  const numbers = [1, 2, 3, 4, 5];
  return (
    <p>
      {numbers.map((number) => (
        <Button key={number} onClick={() => onClick(number)}>
          {number}
        </Button>
      ))}
    </p>
  );
}
export default Buttons;

 

src>components>buttons>Button.jsx

import React from 'react';

function Button({ children, onClick }) {
  return (
    <button type="button" onClick={onClick}>
      {children}
    </button>
  );
}
export default Button;

 

src>components>Counter.jsx

import React from 'react';

function Counter({ count, onClick }) {
  return (
    <button type="button" onClick={onClick}>
      Click me!
      (
      {count}
      )
    </button>
  );
}

export default Counter;

 

src>pages>CounterPage.jsx

import React from 'react';
import Counter from '../components/Counter';
import Buttons from '../components/buttons/Buttons';

function CounterPage({ count, onClick, handleClickNumber }) {
  return (
    <div>
      <p>assignment 1</p>
      <p>Counter</p>
      <Counter
        count={count}
        onClick={onClick}
      />
      <Buttons onClick={handleClickNumber} />
    </div>
  );
}

export default CounterPage;

 

---

수정사항

 

1. 범용 모듈과 컴포넌트는 구분을 위해 띄어주기

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

 

 

2.리액트17 버전 이후부터는 생략이 가능(사용하는 리액트 버전 확인 후 적용하기)

import React from 'react';

생략하고,

babel.config.js  를 아래와 같이 수정해줌

module.exports = {
  presets: [
    [
      '@babel/preset-react', {
        runtime: 'automatic',
      },
    ],
  ],
};

에러가 났으나, 다시 npm start 하니 적용이 됨

 

+ 다른 파일에서 실행시 똑같이 제거하면 안된다는 오류가 남

해결: .eslintrc.js 파일에서 rules:{} 안에 아래 코드 추가하자 eslint 오류 해결

 'react/react-in-jsx-scope': 'off',

참고:
React 공홈
https://ko.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-different-in-the-new-transform
기존 JSX 변환과 현재 JSX 변환의 차이점이 잘 나온 링크
https://blog.saeloun.com/2021/07/01/react-17-adds-jsx-runtime-and-jsx-dev-runtime-for-the-new-jsx-transform

React 17 introduces new JSX transform

 

3.App.jsx>CounterPage.jsx  Props Drilling 문제 해결하기

해결:App.jsx에서 선언했던 state와 함수를 사용되는 CounterPage.jsx 로 옮겼다.

 

참고)

Prop Drilling

Prop Drilling 은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정

prop전달이 10,15..개 등 많은 과정을 거치면 코드를 읽을때 해당 prop을 추적하기 힘들다=>유지보수가 어려워짐

상위 컴포넌트에서 또 하위 컴포넌트로, 또 하위, 또 하위로.. 컴포넌트가 드릴처럼 밑으로 뚫고 내려간다. 이래서 생긴것이 props drilling이란 단어이다.

---

최종 전체 코드

 

---

과제 목표

간단한 카운터앱을 만들어 주세요! 단 이번 과제에서는 각 컴포넌트 마다 각 파일로 분리해주세요. 즉 하나의 파일에는 하나의 컴포넌트만 있어야 합니다.

만약 하나의 파일에 모든 컴포넌트가 있으면, 내가 카운터를 고치고 싶어도 index.js를 수정하고 버튼을 수정하고 싶어도 index.js파일에 접근해야 하니 불편하겠죠? 그리고 코드가 너무 길어서 내가 보고 싶은 코드가 어디 있는지 찾기도 어렵습니다!

기능

• Click me!를 클릭하면 숫자가 1씩 증가합니다.
• 숫자 1 버튼을 누르면 숫자가 1씩 증가합니다.
• 숫자 2 버튼을 누르면 숫자가 2씩 증가합니다.
• 숫자 3 버튼을 누르면 숫자가 3씩 증가합니다.
• 숫자 4 버튼을 누르면 숫자가 4씩 증가합니다.
• 숫자 5 버튼을 누르면 숫자가 5씩 증가합니다.

제한 조건

• if는 사용할 수 있어도 else 사용하실 수 없습니다. GuardClauses 방법을 사용해주세요.
• switch는 사용하실 수 없습니다.
• let은 사용하실 수 없습니다. const만을 사용하여 문제를 해결해주세요.
• 함수 이름과 변수 이름에 줄임말은 사용하실 수 없습니다. 길더라도 명확하게 써주세요.
• indent(인덴트, 들여쓰기) depth를 1로 유지해주세요. 예를 들어, for문 안에 if문이 있으면 indent depth는 2입니다. depth를 줄이는 좋은 방법은 함수(또는 메소드)를 분리하면 됩니다.

요구사항

• ESLint를 돌린 결과 아무런 문제가 없어야 합니다.
• 모든 인수 테스트를 통과시켜야 합니다.
• 한 파일에는 하나의 컴포넌트만 있어야 합니다.