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

import Counter from 'Counter' //노드 JS같은 경우 공용으로 된건 이렇게 쓰지만

(O)import Counter from './Counter'; //우리가 만든건 이렇게 ./을 앞에 붙여줌

 

1.

오류:

이렇게 했을 때

Module not found: Error: Can't resolve './Counter' in 'C:\Users\user\Desktop\codeSoom\demo\src'

....Counter.wasm doesn't exist 오류가 난다면

 

해결:

webpack.config.js 에서 아래 resolve를 추가해줘야함, 다시 npm start

resolve: {
    extensions: ['.js', '.jsx'],
  },

 

 

2.

아래 코드에서 맨 밑에 export 한꺼번에 쓰는 방법

import React from 'react';

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

export default Button;

 

아래처럼 같이 쓰기 가능

import React from 'react';

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

 

3. 

매개변수를 통해 값을 전달시켜주는 것으로 설정하면, 클릭함수 하나로 관리 가능

function handleClick(increment) {
    setState({
      count: count + increment, // increment (증가되는 값을 설정)
    });
}

 

import React from 'react';

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

import React from 'react';

import Button from './Button';

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

 

---

최종 코드

 

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('app'),
);// ReactDOM을 이용해 그려줌

 

App.jsx

import React, { useState } from 'react';

import Page from './Page';

export default function App() {
  // 상태를 관리하는 컴포넌트
  const [state, setState] = useState({
    count: 0,
  });

  const { count } = state;

  function handleClick(increment) {
    setState({
      count: count + increment, // increment (증가되는 값을 설정)
    });
  }

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

 

Page.jsx

import React from 'react';

import Counter from './Counter';
import Buttons from './Buttons';

// 전체 그려주기
export default function Page({ count, onClick }) {
  return (
    <div>
      <p>Hello,world</p>
      <p>Hi</p>
      <Counter
        count={count}
        onClick={onClick}
      />
      <Buttons
        onClick={onClick}
      />
    </div>
  );
}

 

Counter.jsx

import React from 'react';

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

 

Buttons.jsx

import React from 'react';

import Button from './Button';

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

 

Button.jsx

import React from 'react';

export default function Button({ children, onClick }) {
  const style = {
    background: '#f00',
  };
  return (
    <button type="button" onClick={onClick} style={style}>
      {children}
    </button>
  );
}