리액트 Hooks(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)

이렇게 사용해왔다.내가 사용하는 식은 배열 비구조화 할당시 쓴다고 한다. 망할! 뭔 말이지? 배열 비구조화가 뭔지도 검색해봤다.
MDN에 구조 분해 할당이 나온다.
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
이 블로그도 볼 게 엄청 많아보인다... !!!! 대박슨 볼 게 너무 많음