React - Hook / useState (.jsx)

Hook

: 함수형 컴포넌트에서 react state와 생명주기 메서드의 기능을 사용할 수 있게 해주는 함수이다.

 

state : 컴포넌트의 상태값

useState() : 컴포넌트의 상태(state)를 생성하고 관리할 수 있게 해주는 함수(react hook)

=> 컴포넌트는 state값이 변경되면 이를 확인하고 요소를 리랜더링 해준다.

 

[사용법]

const [변수명, setState변수명] = useState(초기값);

- 변수명 : 원하는 state명을 설정

- set변수명 : 해당 state값을 변경할 함수

const [num, setNum] = useState(0);

    const onClick1 = () => {
        // num += 1;
        setNum(num + 1); // 상태를 업데이트할 때는 setNum 함수를 사용해야 함
        console.log("num : " + num);
    }

저 코드를 해석해보자면

num, setNum변수에 useState(0)의 리턴값을 할당하는데

useState(0)에서 리턴되는 배열의 첫번째 값에는 현재 상태값이 있고 두번째 값에는 상태를 변경하는 함수가 있음

첫번째 값을 num에, 두번째 값을 setNum에 할당함

const onClick1에 함수를 할당하는데 () 매개변수가 없는 함수를 곁들인.그리고 초기값은 0인.

그리고 이 함수는 클릭 시 1증가시키는 기능을 가진 함수인 것

return (
        <div>
            <span>COUNT : {num} </span>
            <button onClick={onClick1}> + </button>
            <button onClick={onClick2}> - </button>
        </div>
    )

이어서 다음 코드를 보면 

return에는 한가지의 태그만 올 수 있어서 <div> 하나만 있고

{num} 을 설명하자면 JavaScript표현식을 의미하고 현재 상태값인 num이 표시됨

# React에서 상태값이나 변수를 jsx내에서 표시할 땐 { }를 사용함

 

 

jsx에서 { }의 의미

jsx는 HTML이랑 매우 유사한 문법을 사용하지만, 실제로는 JavaScript 코드임!

(.jsx) = [HTML처럼 보이는 JS코드]

Q. 왜 { }를 사용해야하는거지?

{ } 를 안쓰면 변수명이 단순 문자열로 처리가 됨 그래서 JavaScript라고 명시를 해줘야함!

{} 여기에는 JavaScript표현식이 들어있으니까 그 결과를 HTML에 집어넣어라! 라고 하는거

 

+ 지금까지 헷갈렸던 이유가 html과 javaScript가 별도로 작성된다는 걸 까먹고 있었다.. wow