(항해99)의 4주차 (220328-220403) WIL

항해를 시작하고 가장 어려웠던 한 주가 지나갔다.

재밌게만 느껴지던 코드가 정말 어렵다는 생각이 들었고

남들은 잘 이해하는 것 같은 개념도 잘 이해가 되지 않아 힘들었다.

특히 과제로 단어장을 만들어보면서 여러 번 위기가 있었는데

결국 마지막에 가서는 잘 마무리할 수 있어서 다행이었다.

 

하지만 이런 고민들이 있어서 리액트와 좀 더 깊이 알게 된 것 같다.

중간에 한 번 코드를 통째로 갈아엎을 때는 무섭기도 했지만

그러면서 state를 어떤 방식으로 써야 하는지도,

props가 왜 중요한 개념인지도 조금은 느낄 수 있었다. 

코드가 눈에 들어오지 않아 손으로 쓰면서 분석해보기도 했는데

화면으로 다른 사람 코드를 읽는 연습도 필요하다는 생각이 들었다. 

 

리덕스에 파이어베이스까지 사용하다보니 구조가 점점 복잡해지면서

계속 헷갈리는 부분들이 많아 졌다. 

왜 개발자들이 변수명을 중요하게 생각하고 폴더구조를 잡아두는지 알 것 같았다. 

앞으로 훨씬 복잡한 프로젝트를 만들려면 더 열심히 정리하는 습관이 있어야겠다. 

 

이제 리액트를 온전히 배울 수 있는 기간은 딱 4일이 남았다.

심화주차가 시작된지 벌써 이틀이 지나갔고 아직 진도가 더디다. 

이대로 백엔드와 만나면 내가 잘 할 수 있을까 걱정이 되긴 하지만 더 열심히 해봐야겠다. 

화이팅!

 

---

1. class형 컴포넌트와 함수형 컴포넌트의 라이프사이클 

 

component는 크게 두 가지 방식이 있다.

class형과 function형으로 현재 리액트의 공식문서에는 함수형을 쓰도록 명시한다. 
하지만 class형의 라이프사이클 함수가 component의 라이프사이클을 명확히 보여주기 때문에, 알아둘 필요가 있다.

 

component의 라이프사이클은 크게 생성-수정-제거의 단계로 나뉜다. 

 

1) 생성: 처음 component를 불러오는 단계
2) 수정: props가 바뀔 때 state가 바뀔 때, 부모 component가 렌더링할 때, 강제 업데이트가 이루어질 때
3) 삭제: 해당 component가 화면에서 사라질 때 (사용자의 행동, 페이지 이동 등)

---

class형의 라이프사이클함수는 생성-수정-삭제 단계를 거치며 호출되는 함수이다. 

① constructor() : 생성자 함수, 해당 component의 props와 state를 선언(?)한다. 
② render() : component의 모양을 정의한다. (마치 HTML같은) 리액트 요소를 return에 넣어 반환한다.
③ componentDidMount() : 마운트(component가 화면에 나타남)가 완료된 후 실행된다. 
④ componentDidUpdate(prevProps, prevState, snapshot) : 리렌더링이 완료된 후 실행된다. 
    prevProps, prevState는 업데이트 전의 Props, State를 말한다. 
⑤ componentWillUnmount() : 컴포넌트가 제거되기 전 마지막에 실행된다. 

라이프사이클함수는 component의 라이프사이클에 따라 1 - 2 - 3 - 2(리렌더링) - 4 - 5의 과정으로 실행된다. 

---

함수형 컴포넌트는 클래스형 컴포넌트의 라이프사이클함수에 해당하는 useEffect를 사용한다. 

useEffect는 컴포넌트가 한 번 렌더링 된 후 적어도 한 번은 실행된다.

클래스형 컴포넌트의  componentDidMount 역할을 한다고 할 수 있다.

 

useEffect(()=> {});

1. dependency를 생략하고 사용할 수 있지만,

해당 컴포넌트가 렌더링 될 때 마다 useEffect가 실행되는 일이 발생한다.  

 

useEffect(()=> {}, [dependency]);

2. [ ] 에 아무것도 넣지 않은 유즈이펙트는 첫 렌더링 시 한 번만 실행된다. 

 

const [name, setName] = useState('');

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

3. dependency에 변수를 넣어 해당 변수가 변할 때,

예를 들어 이런식으로 useState와 useEffect를 사용한다면 name변수가 변할 때

useEffect 함수가 계속 실행된다. 클래스형 컴포넌트의 componentDidUpdate라고 생각할 수 있다. 

만약 다른 요인으로 리렌더링이 되더라도 해당 변수의 값이 변하지 않는다면 useEffect는 실행되지 않는다. 

 

 

 

const [name, setName] = useEffect;
useEffect(()=> { console.log(name);
            	 return ()=> {
                 console.log('stop');
                   }; } );

1. return은 componentWillUnmount에 해당한다. 렌더링된 후 유즈이펙트가 실행되고,

   컴포넌트가 없어지기 전 return이 실행된다. 

 

const [name, setName] = useEffect;
useEffect(()=> { console.log(name);
            	 return ()=> {
                 console.log('stop');
                   }, [] } );

2. 마찬가지로 [ ] 를 비워둔다면 유즈이펙트와 return 모두 한 번씩만 실행된다. 

 

const [name, setName] = useEffect;
useEffect(()=> { console.log(name);
            	 return ()=> {
                 console.log('stop');
                   },[name] } );

3. dependency에 넣은 변수가 변화할 때만 return이 실행된다.