useState, useEffect에 대해 알아보자

https://mjn5027.tistory.com/31 이 글을 통해 나는 리액트 Hooks를 잘 모르는구나 깨닫게 되었다. 내가 실무에서 자주 사용하는 useState, useEffect 는 이제 어느정도 알지만 useContext, useReducer, useCallBack 은 잘 모르기에 이 기회에 좀 알아둘 계획이다 ㅎㅎ;; 우선 위 코딩스토리님 글에 있는 useState와 useEffect에 대해 먼저 정리해보겠다.

useState

useState는 가장 기본적인 Hook의 기능으로 함수형 컴포넌트 내에서 능동적으로 상태를 관리할 수 있게 해준다.

let numberState = useState(0);
let numberCount = numberState[0];
let setNumberCount = numberState[1];

이렇게 예시를 적어주셨는데 나는

const [numberState, setNumberState] = (0)

이렇게 사용해왔다.내가 사용하는 식은 배열 비구조화 할당시 쓴다고 한다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

useEffect

리액트의 컴포넌트가 렌더링 될 때마다 특정 작업이 일어나게 해준다. 특정 작업을 수행하는 렌더링 기준을 정할 수 있다.

EX)

useEffect( () => {
    console.log("렌더링 되었습니다.");
});

최초 렌더링 시에만 반응하게 하고 싶으면

EX)

useEffect( () => {
    console.log("렌더링 되었습니다.");
},[]);

이렇게 [] 빈 값을 넘겨주면 된다. 만약, 특정 값에만 반응하게 하고 싶다면?

EX)
useEffect( () => {
    console.log("렌더링 되었습니다.");
}, [stringCount]);

이렇게!

useContext 부터는 아래 글을 참고했다! https://velog.io/@velopert/react-hooks#1-usestate 이 블로그도 볼 게 엄청 많아보인다… !!!! 대박슨 볼 게 너무 많음