[react web] Hook 기초_useState

핵심만 압축했습니다. 디테일한 부분은 공식문서를 확인해 주세요!

 

 

0. 들어가면서

 Hook의 종류는 굉장히 많다. 만약 간단한 프로젝트만 한다면, useState, useEffect 정도만 알아도 충분하고, 복잡한 내용은 useRef 정도를 추가하면 된다. 시중의 블러그나 책은 대부분 같은 내용만 다루는 것 같다. 더하기와 빼기... 물론 좋은 예제이지만 나는 핵심만 압축해서 이야기 해보고자 한다. 기초적 실습을 보여주고, 추가로 프로젝트 시 사용했던 수많은 기술들을 담아보려 한다.

 

사실 useState와 useEffect 정도만 알아도 이 글을 보고 있는 분들의 초급 수준에서 문제 없다. useEffect는 추가로 다음 블로그에서 이야기 해보려 한다.

 

 

 

 

1. useState 핵심

1. html은 변하지 않는다.
2. html의 값을 변화시키려면, 화면을 새로고침해야한다.
3. 전체 화면을 새로고침하는 것은 비효율적이다. 변경되는 화면만 새로고침하기 위해 useState를 쓴다.

끝이다.

 

 

실습을 위해 아래를 참고하여 component를 새롭게 만들었다.

https://han-py.tistory.com/397

 

 

기본 깡통이다.. 위는 새롭게 만든 Hook Component이고, 만든 jsx 파일을 App.js 파일에 넣어줬다.

 

 

이 부분은 뭐라 추가 설명하기 민망할 정도로 기초이기 때문에 혹여나 이해안되시는 분들은 5분 만 시간들여서 여기를 보고 오면 된다. 기본 세팅은 끝이다.

 

 

2. 코드

2.1 useState 사용하기

사용법은 아래와 같다. detail한 내용은 공식문서를 참고하자. 초급자는 너무 많이 알면 헷갈린다. 

동그라미 친 3부분만 추가하면 끝이다!!!!

 

import React, {useState} from 'react';

이 부분은 useState를 사용하기 위해 import 한 부분이다.

 

const [hanpy, setHanpy] = useState();

이 부분은 useState를 사용하는 부분이다. []를 통해서 이름을 짓는다.

[]의 첫번째 hanpy : 변수를 지정한 부분이다.

[]의 두번째 setHanpy : 변수 변경은 이것을 사용해서 한다. 통상적으로 첫번째 변수인 hanpy에서 앞에 set을 붙여 사용한다.

useState() : () 안에는 초기 값을 넣어준다.

 

{hanpy}

html 코드 내부에서 useState 변수를 사용하려면 {} 안에 넣서 사용해 주면된다. 

첫번째 변수인 hanpy를 넣어서 사용한다.

setHanpy는 html내부에서 사용하지 않는다.

 

 

2.2 값 변경하기

 위의 내용만 적으면, 일반적인 html과 달라진게 없다. button을 만들어 이벤트를 걸어주면 아래와 같다.

딱 2개만 추가 했다. button에 onClick를 걸어서 지정한 함수가 실행되게 했다.

 

const handleTest = () => {}

함수 시정 시 위와 같은 방법으로 통일하다. 이는 component에서 class형이 아닌 함수형으로 사용하기로 한 방식과 동일하다. 이런식으로 통일해서 사용하자.

 

setHanpy(hanpy+1)

hanpy = hanpy + 1 이런식으로 하면 안된다. 그러면 useState를 사용한 이유가 없어진다. 반드시 hanpy의 내부의 값 변경 시 setHanpy를 사용하자. 

참고// setHanpy(hanpy + 1)  대신  setHanpy((pre) => pre+1)  을 자주 사용한다. pre란 이전 값을 의미한다.  setHanpy(hanpy + 1) 로 적은 이유는 글을 읽으시는 분들의 직관적 이해도 상승을 위함임을 알자.

 

onClick={}

 주의 할 점은, onclick으로 적으면 작동되지 않는다. 반드시 캐멀케이스인 onClick로 적어주자.

참고// 보통 event를 넘기지만, 추가로 다른 값을 변수로 넘기는 방식도 있다.  여기는 기초 글이기 때문에, 게시판 만드는 부분에서 좀 더 자세히 다루겠다.

 

 

2.2 코드 결과

우리가 만든 button을 눌러 주면, 버튼안의 숫자가 증가하는 것을 알 수 있다. 간단하다.

+ 중앙정렬은 app.js에서 적용한 css 이다.

 

 

 

이제 조금 더 업그레이드를 해보자.

 

[Web/React] - [react web] useState로 내용 숨기고 보이기

[Web/React] - [react web] Hook 기초_useEffect