인프런 커뮤니티 질문&답변

안녕하세요!

카운터앱 구현하기를 조금 다르게 코드를 짜보았는데, 커스텀훅을 활용법에 익숙하지 않아서, 이렇게 구현하는 방법이 적절한지 감이 안와요.. 바쁘신데 죄송하지만 아래와 같은 커스텀훅 구현방식의 장단점에 대해서 알려주시면 감사하겠습니다!

먼저 useCount.jsx를 아래와 같이 작성하였구요

import { useState } from 'react';

function useCount() {
    const [num, setNum] = useState(0);
    const onClinkCount = (e) => {
        setNum(num + Number(e.target.value))
    }
    return [num, onClinkCount];
}

export default useCount;

아래는 넘버 조작 부분인 Controller.jsx

const Controller = ({ onClinkCount }) => {
    return (
        <div>
            <button onClick={onClinkCount} value="-1">-1</button>
            <button onClick={onClinkCount} value="-10">-10</button>
            <button onClick={onClinkCount} value="-100">-100</button>
            <button onClick={onClinkCount} value="+100">+100</button>
            <button onClick={onClinkCount} value="+10">+10</button>
            <button onClick={onClinkCount} value="+1">+1</button>
        </div>
    )
}

export default Controller

카운트 넘버 표시부분인 Viewer.jsx

const Viewer = ({ num }) => {
    return (
        <div>
            <div>현재 카운트:</div>
            <h1>{num}</h1>
        </div>
    )
}

export default Viewer

그리고 부모 컴포넌트인 App.jsx 입니다.

import "./App.css"
import Controller from './components/Controller'
import Viewer from './components/Viewer'
import useCount from './hooks/useCount'


function App() {
  const [num, onClinkCount] = useCount();
  return (
    <div className='App'>
      <h1>Simple Counter</h1>
      <section>
        <Viewer num={num} />
      </section>
      <section>
        <Controller onClinkCount={onClinkCount} />
      </section>
    </div>
  )
}

export default App

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨

질문 하시기 전에 꼭 확인해주세요
- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)
- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)
- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)

질문 하실때 꼭 확인하세요
- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)
- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)
- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)
- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요

- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.