React - Hook 24.05.22

경로 변경 및 재설치

vscode에 git bash가 설치가 안되있다면
vscode에서 terminal -> cmd를 실행해서 npm install입력
그 후 yarn start 입력하면 react 실행됨
(ctrl+c -> 실행 종료)
그 후 cd..입력하면

경로가 바뀐다

hooks라는 프로젝트 생성(node_modules생성 된 곳)
그 후 루트 변경 (file-open file- hooks- 폴더선택)

terminal을 이용하여 hooks로 변경 되었는지 확인

useState

가장 기본적인 Hook이며 함수 컴포넌트에서 가변적인 상태를 지닐 수 있게 해준다. 만약 함수 컴포넌트에서 상태를 관리해야 한다면 useState를 사용하면 된다.

useState 여러번 사용하기

하나의 useState함수는 하나의 상태값만 관리할 수 있다. 그러면 관리해야 하는 상태가 여러개라면 useState를 여러번 사용하면 된다.

리액트의 생명주기

useEffect (시작할 때와 업데이트를 조작하는 hook)

리액트 컴포넌트가 렌터링 될때마다 특정 작업을 수행하도록 설정할 수 있다.
클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태.
componentDidMount: 시작하다
componentDidUpdate: 업데이트

• mount될때와 update될때 모두 실행
  
  

mount 될때만 실행하고 싶을때

useEffect에서 설정한 함수를 컴포넌트가 화면에 맨 처음 렌더링될때만 실행하고 업데이트 될때는 실행하지 않으려면 두번째 매개변수를 비어있는 배열로 주면 된다.

useEffect(() => {
    console.log(`렌더링이 완료되었습니다!`);
    console.log({
      name,
      nickname,
    });
  }, []);	//[] 비어있는 객체는 없데이트할 객체나 변수가 없다는 뜻.

//[] 비어있는 객체는 업데이트할 객체나 변수가 없다는 뜻

특정 값이 업데이트 될때만 실행하고 싶을때(name변수가 업데이트될때 실행시킬때)

useEffect(() => {
    console.log(`렌더링이 완료되었습니다!`);
    console.log({
      name,
      nickname,
    });
  }, [name]);

• 결과비교
  
  
  

뒷정리하기

useEffect는 기본적으로 렌더링이 되고 난 직후마다 실행되며, 두번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라진다.
컴포넌트가 unmount되기 전이나 업데이트 되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷정리(cleanup)함수를 반환해 줘야 한다.

useEffect(() => {
// mount 될때 실행로직
return() => {
			//cleanup
}
},[]);

• 출력
  
  
  
• 숨기기를 눌렀을때 cleanup