휘의 단칸방

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); // 상태를 업데..

useCallBack:메모이제이션 기법으로 컴포넌트 성능을 최적화 시켜주는 도구함수를 메모이제이션해서 불필요한 재생성을 방지한다 ( 재사용한다는 뜻 )컴포넌트가 리랜더링 될 때, 의존성 배열에 있는 값이 변경되지 않으면 이전의 함수를 반환함자식컴포넌트가 불필요하게 리랜더링 되는 것을 방지하는데 유용함. useCallback 사용법useCallback(() => { 코드}, []) 예시 코드   단어 설명# 메모이제이션 기법: 동일한 작업을 반복할 때, 그 작업의 결과를 저장해 두었다가 다시 사용함으로써 불필요한 중복 연산을 피하는 최적화 기법

Class Componentstate(필드 대체)를 가지고 있고 이를 수정할 수 있다.라이프 사이클에 따른 생명주기 메서드를 사용할 수 있다. state값이 변경되면 리액트는 변화를 인식하고 그에 맞는 화면을 출력하기 위해 component를 리랜더링한다. 그래서 state값을 변경할 때는 state에 어떤 숫자를 넣어서 변경하는 게 아닌this.setStatus() 함수를 이용해서 새로운 status값을 넣어주면 된다.#여기서 랜더링이 안 되게 하려는 이유는 불필요한 리랜더링이 발생할 경우 불필요한 계산과 작업이 이루어지기 때문에 컴포넌트의 성능이 저하되기 때문 생명주기(라이프 사이클)react의 component 라이프 사이클은 생성(mount), 업데이트(Update), 제거(Unmount) 단계로..