React Hooks - useState & 리액트 복습

리액트 복습 첫 번째 - 전체적인 흐름 이해와 Counter 함수 구현

버튼을 누르면 숫자가 1씩 올라가는 기초 그 잡채인 함수를 구현해 보기 with useState,,

 

우선 리액트란?

사용자 정의 태그를 만드는 기술

그 사용자 정의 태그를 컴포넌트라고 한다.

편리함 등을 위해 리액트로 컴포넌트라는 작은 단위의 부품을 만듦

이 때 컴포넌트는 반드시 대문자로!

 

JSX는 리액트에서 UI를 표현하기 위해 확장된 문법

대충 자바스크립트 문법이랑 비슷하지만 html을 곁들인 것

 

npx create-react-app@latest .
npm start

을 터미널에 입력해서 리액트 가장 최신버전으로 손쉽게 애플리케이션 생성하고 시작

http://localhost:3000/

로 접속하면 리액트 애플리케이션 실시간으로 확인할 수 있음

import React, {useState} from 'react' ;
function Counter({title, initValue}){ //구조분해할당
  const countState = useState(initValue);
  const count = countState[0]; //read
  const setCount = countState[1]; //update
  function up(){
    setCount(count+1);
  }
  return (
    <div>
        <h1>{title}</h1>
        <button onClick={up}>+</button>  👉  {count}
    </div>
  )
}
function App() {
  return (
    <div>
        <Counter title = "손님수 카운터" initValue={10}></Counter>
    </div>
  );
}

export default App;

코드를 작성하면 이와 같이 뜨고 버튼을 누를 때마다 1씩 증가하게 된다.

 

저 함수 App이 화면에 보이는 함수다.

<div> 안에 Counter 함수를 넣어 실행시킨다.

이때 JSX에서는 인접한 요소들이 하나의 부모 안에 들어있지 않으면 안 됨!

그래서 <div>가 굳이 필요 없더라도 넣어서 묶어주기

Counter함수를 살펴보면 우선 Props를 구조분해할당으로 넣어줬다. 

저기에는 ({title, initvalue})로 구조분해할당해서 넣어줬지만 (props(꼭 props라고 안 넣어줘도 ok))로 넣은 다음 사용할 때 props.title, props.initValue로 해줘도 된다.

이렇게 Props를 사용해서 함수의 재사용하기 쉽고 유지보수가 용이하다.

<Counter title = "손님수 카운터" initValue={10}></Counter>

이 부분 보면 알 수 있듯이 이 Counter함수를 재사용하고 싶을 때 Props를 변경해서 사용해 주면 됨

따라서 재사용하기 쉽고 유지보수가 용이함

Counter에 리턴값을 보면 우선 <h1>{title}<h1>을 넣어주어 '손님수 카운터'란 글자가 출력됨

그리고 밑에 <button onClick={up}>+</button> 👉 {count}를 살펴보면

첫 번째 주의할 것은 onClick 할 때 'c'가 대문자라는 것,, 이 것 때문에 두세 번 오류 난 적 아루아루..

그리고 함수를 넣어줄 때 반드시 중괄호를 통해 넣어줄 것 

코드에 따르면 버튼 클릭 시 up이라는 함수가 실행

up 함수를 보면 setCount등장! 

 

useState에 대해 우선 알아보자

useState는 우선 리액트로부터 import 해서 사용해 주기 

useState는 상태관리 훅으로 배열을 반환하며

첫 번째 요소는 현재 상태의 값을 나타내는 state 변수이고

두 번째 요소는 state 변수를 업데이트하는 함수인 setState 함수다.

함수를 호출하면 state 변수의 값이 변경되고 컴포넌트가 다시 렌더링 된다.

 

조금 더 쉽게 말하자면

첫 번째 요소는 읽기 전용이고 두 번째 요소는 업데이트전용이라고 생각하면 된다.

그리고 내가 작성한 코드에서 setCount를 호출하면 function Counter가 렌더링 된다.

저 setCount 안의 값을 보면 count를 +1 시켜주는 것을 알 수 있음

읽기 전용 함수인 count를  👉 {count} 여기다가 넣어주어 렌더링 될 때마다 1씩 증가 

따라서 버튼을 누르면 up이 실행되고 그에 따라 Counter가 렌더링 되고 +1이 된다는 것이다.

 

난 조금 더 뜯어서 이해하기 위해서 count랑 setCount를 이번엔 따로 썼지만

보통은 구조분해할당을 사용해서 쓴다. 물론 나도 뜯어서 써본 건 이번이 처음,,

그냥 간단히 const [count, setCount] = useState(initValue) 이렇게 써주면 됨

아 그리고 useState 안에는 초기값을 넣어주면 된다. 

난 initValue를 받아왔지만 보통 0이나 ' ' , [ ] 이런 식으로 초기값 설정을 많이 한다.

 

 

이걸 내가 이해를 했기 때문에 이렇게 쓰지만 

리액트 처음 공부하는 사람이 보면 뭔 말인지 모를 듯,.. 설명 잘하는 거.. 그거 어떻게 하는 건데..ㅋ

블로그 작성하다 보면 나아지겠지 뭐 ^__^