counter 리액트 만들기_useState, useRef 훅 [2편]_기능구현

 

 

<지난 이야기...  

UI를 잘 만들었다! > 

 

 

 

현재 카운트 부분 : Viewer.jsx 

버튼 부분 : Controller.jsx

 

자! 이제 기능을 만들어보자 

 

하고 싶은 게 뭔지는 화면만 봐도 아시죠? 

 

아래 숫자가 적힌 버튼을 클릭하면 그에 맞게 위에 있는 

현재 카운트  숫자가 변하는 것입니다. 

 

 

그러면 숫자가 바로 바로 변해야하니까는 ... 

state로 만들어야할것같아요. 

왜냐하면 바로 렌더링을 해주니까요 

 

그러면 어디에 state로 변수를 만들어야할까요?? 

 

저도 처음에는 카운트가 적혀있는 숫자 컴포넌트인 Viewer라고 생각했는데요.

정답은 바로 !!!! 

 

App.jsx ( 부모 jsx) 입니다. 

 

왜냐하면 컴포넌트 간에 데이터를 전달하는 방법은 아시죠?? 

바로 props 인데여 

 

props는 부모, 자식 컴포넌트 사이에만 데이터가 서로 주고 받고 할수있기 때문이져

자 그럼 이제 코드 봐볼까요?! 

 

=> 세줄 요약 : 1. 컴포넌트 간에 데이터 전달은 props를 이용

2. props 는 부모에서 자식으로만 전달 가능 

3 Viewer와 Controller는 부모 자식관계 아님 

 

 

=> 데이터들은 위에서 아래로만 흐른다. => 단반향 데이터 흐름 

=> 직관적

---

 

 

 

1. count라는 state를 App.jsx 에 만들어줍니다.

 

import './App.css'
import Controller from './components/Controller'
import Viewer from './components/Viewer'
import {useState} from 'react'

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

  return (
    <div className = "App">
      <h1> Simple Counter </h1>
      <section>
        <Viewer count = {count}/>
      </section>
      <section>
        <Controller/>
      </section>
    </div>
    
  )
}

export default App

 

 

useState를 import하고 useState를 이용하여 count를 만들어줍니다. 

 

그리고 Viewer에 count props로 count값을 전달해줍니다. 

 

 

2. Viewer.jsx 는 어떻게 생겼니 ? 

 

 

이렇게 props로 받은 count를 {} 를 통해 보여주기만 하면 됩니다. 

 

 

 

 

3.  Controller에는 어떻게 주니 ? 

 

 

 

 

onClickButton 이라는 이벤트 핸들러를 만들어줍니다! 

인수인 Value값 + count를 setCount를 이용해 count로 세팅해주는 함수에요 

 

이제 Controller.에 props로 전달해줍니다. 

 

코드가 참..제가 보기에는 신기하네요. 

java만 해서 그런가 props라는 것에 함수 비스무리 한것도 보낼수있다니... ㅎ

 

 

4. props를 받은 Controller 

 

 

props로 받은 onClickButton 을 button 태그의 onClick 이벤트에 할 때 넣어줍니다. 

 

 

 

5. 완성! 

 

 

 

react 나름 익숙해져가는것 같기도하고....잼나네요 

 

꾸준히 공부해봐야겠어요

 

그럼 다음 이시간에 만나요 ~