항해 99 - 2022.02.06.SUN/ 이번주의 나는(라이프사이클 & 리액트 훅)

이번 챕터 일정

• 02/04 (금) 21:00 까지 : S.A 제출 완료 ✅
• 02/07 (월) 14:00 : 아이엘포유 협력사 채용 세션
• 02/08 (화) 20:00 : ‘쌀 팔다 개발자’ 김병욱님 특강
• 02/08 (화) ~ 02/09 (목): 담당 매니저와 1:1 선택 면담
• 02/09 (수) 저녁 : 제4회 항해톡
• 02/10 (목) 21:00까지 : 주특기 심화 주차 개인/팀 과제 제출 완료
• 02/11 (금) 09:00 : 미니 프로젝트 주차 발제

오늘 내가 할 일

• WIL 작성 및 밀린 블로그 정리 ✅
• 2주차 완강!! 
• 1일 1 커밋! ✅

---

 

오늘은 일요일이라서 밀린 블로그 정리도 하고,,, 인강도 들어야 하고,,, 뭐야 일요일이 더 바빠 왜,,,

---

이번 주의 나는?

- 01.28 ~02.03 리액트 숙련 주차

나 스스로에게 굉장한 실망을 했던,,, 그런 주차,,,, 과제는 어렵지 않았는데 

이해를 하고 썼는가? 아니요

코드 리뷰를 하였는가? 아니요

리덕스에 대한 이해가 끝났는가? 아니요

무려 이주나 지났는데 아직도 그냥 그렇구나 하고 넘어가 버리기 다반사

 

강의가 별로여서 힘들었던 걸까

내가 이해를 잘 못하는 걸까

 

여기 들어오기 전에 리액트에 대해서 뭐라도 하고 왔으면 조금은 달라졌을까

잘하는 사람들과 나를 비교하게 되면서 점점 나 자신에게 속상해지는 한 주였다. 

 

이제 고작 3주 차를 진행하고 있는데 벌써부터 풀어지는 내 사진에게도 한심했고

정말 열심히 하고 싶어 했으면서 벌써부터 지치는 내 모습에도 너무 한심했다

 

그래도 해봐야지,,, 그래도 달려봐야지,,, 나는 나니까

항상 다짐하고 열심히 살아가기 위해 노력해야겠다. 

---

이번 주 WIL의 키워드

1. 라이프사이클(클래스형 vs 함수형)

• 컴포넌트 생명주기 ( 컴포넌트가 렌더링을 준비하는 순간부터 , 페이지가 사라질 때 까지가 라이프 사이클이다.)
• 라이프 사이클 함수는 클래스형 컴포넌트에서만 사용할 수 있다!!
• 함수형 컴포넌트에서는 react hooks을 통해서 라이프 사이클을 대체할 수 있다.

• 컴포넌트는 생성되고 -> 수정 (업데이트) 되고 -> 사라진다
• 수정 (업데이트)는
  • props가 바뀔 때
  • state가 바뀔 때
  • rerender (부모 컴포넌트가 업데이트되었을 때)
  • 강제로 업데이트했을 때 (forUpdate()) 

2. react hooks

• 함수형 컴포넌트에서는 react hooks을 통해서 라이프 사이클을 대체할 수 있다.

1) useState

import {useState} from "react"; 

const Test = () =>{
	const [value, setValue] = useState(0);
    
    return (
    	<div>
        	<button onClick={()=> setValue(value +1)}></button>
        </div>
    )
}

• useState 함수의 파라미터에는 상태의 기본 값을 넣어준다 
• 함수가 호출되면 배열을 반환하는데
• 배열의 첫 번째 원소는 상태 값 (value)
• 두 번째 원소는 상태를 설정하는 함수 (setValue)
• 함수에 파라미터를 넣어서 호 풀하면 전달받은 파라미 더로 값이 바뀌고 리 렌더링 된다

import {useState} from "react"; 

const Test = () =>{
	const [name, setName] = useState('');
    const [nickname, setNickname] = useState('');
    
    const onChangeName = (e) => {
    	setName(e.target.value);
    } 
    
    const onChangeNickname = (e) => {
    	setNickName(e.target.value);
    } 
    
    
    return (
    	<div>
        	<div>
            <input value ={name} onChange={onChangeName} />
            <input value ={nickname} onChange={onChangeNickname} />
            </div>
            
            <div>
            	<p> {name} </p>
                <p> {nickname} /<p>
            </div>
        </div>
    )
}

• 여러 번 사용하는 것도 가능하다 

---

2) useEffect

• 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 한다
• 클래스형 컴포넌트의 didmount& didupdate

 import {useState, useEffect} from "react"; 

const Test = () =>{
	const [name, setName] = useState('');
    const [nickname, setNickname] = useState('');
    
    useEffect(()=>{
    	console.log({name, nickname}); //인풋에 작성한 이름과 닉네임이 콘솔록 찍힘
    })
    
    const onChangeName = (e) => {
    	setName(e.target.value);
    } 
    
    const onChangeNickname = (e) => {
    	setNickName(e.target.value);
    } 
    
    
    return (
    	<div>
        	<div>
            <input value ={name} onChange={onChangeName} />
            <input value ={nickname} onChange={onChangeNickname} />
            </div>
            
            <div>
            	<p> {name} </p>
                <p> {nickname} /<p>
            </div>
        </div>
    )
}

마운트 될 때만 실행하고 싶을 때 

    useEffect(()=>{
    	console.log({name, nickname}); //인풋에 작성한 이름과 닉네임이 콘솔록 찍힘
    }, [])

• 맨 처음 렌더링 될 때만 실행하고, 업데이트될 때는 실행하지 않으려면 함수의 두 번째 파라미터로 빈 배열을 넣어준다!

특정 값이 업데이트될 때만 실행하고 싶을 때

    useEffect(()=>{
    	console.log(name);
    },[name])

뒷정리 하기 

    useEffect(()=>{
    	console.log('effect');
        reutrn ()=>{
        	console.log('cleanup');
        }
    },[]) //언마운트될 때만 뒷 정리 함수를 호출하고 싶을땐 빈배열 넣어주기

---

3) useRef

• ref를 더 쉽게 사용할 수 있도록 해준다!
• useref를 사용하여 ref를 설정하면 useref를 통해 만든 객체 안의 current값이 실제 엘리먼트를 가리킨다!

import {useRef} from "react";

const Test = () => {
  const my_wrap = React.useRef(null);

  window.setTimeout(() => { // 1초 뒤에는?!
    console.log(my_wrap);
  }, 1000);
  
  return (
    <div ref={my_wrap}>
      {my_lists.map((list, index) => {
        return <ItemStyle key={index}>{list}</ItemStyle>;
      })}
    </div>
  );
};