라이프사이클 클래스형 vs 함수형 + 리액트 훅 그리고 4주차 회고

라이프사이클

리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다. 클래스형만 사용 가능하다

 

주의하여 볼 것은 업데이트 부분인데, 업데이트는 다음과 같은 4가지 상황에서 발생한다.

1. props가 바뀔 때
2. state가 바뀔 때
3. 부모 컴포넌트가 리렌더링 될 때
4. this.forceUpdate로 강제로 렌더링을 트리거할 때

 

📕 함수형 컴포넌트

☑️ JSX를 return문을 사용해서 반환

☑️ state를 사용할 수 없다

☑️ 생명 주기 함수를 작성할 수 없다

import React from 'react';

function Hello({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
      {isSpecial && <b>*</b>}
      안녕하세요 {name}
    </div>
  );
}

export default Hello;

📕 클래스형 컴포넌트

☑️ class 키워드로 시작

☑️ Component로 상속 받음

☑️ render() 함수를 사용해서 JSX를 반환

☑️ props를 조회할 때 this 키워드 사용

import React, { Component } from 'react';

class Hello extends Component {
  render() {
    const { color, name, isSpecial } = this.props;
    return (
      <div style={{ color }}>
        {isSpecial && <b>*</b>}
        안녕하세요 {name}
      </div>
    );
  }
}

export default Hello;

 

---

 

 

리액트 훅(React Hooks)이란

리액트 16.8 버전부터 추가된 기능으로, 클래스 컴포넌트와 생명주기 메서드를 이용하여 작업을 하던 기존 방식에서 벗어나 함수형 컴포넌트에서도 더 직관적인 함수를 이용하여 작업할 수 있게 만든 기능입니다.

 

리액트 훅 사용 규칙은 다음과 같습니다.

1. 훅은 최상위 레벨에서만 호출 가능합니다. 다시 말해 반복문, 조건문, 중첩된 함수 내부에서 호출하면 안 됩니다.
2. 훅은 오직 리액트 함수 컴포넌트 내에서만 호출 가능합니다.

리액트 훅 사용 규칙을 지킴으로써 컴포넌트가 여러 번 렌더링 되어도 훅의 호출 순서를 동일하게 유지할 수 있으며, 훅이 여러 번 호출되어도 훅의 상태를 올바르게 유지할 수 있습니다. 또한, 컴포넌트의 모든 상태 관련 로직의 직관성을 높일 수 있습니다.

 

내장함수

 

1. useState()

const [state, setState] = useState(initialState);

상태를 설정할 때 사용하는 훅 API로 클래스 컴포넌트의 생명주기 메소드 constructor()에서 상태를 초기화하는 것과 비슷한 역할을 하는 API입니다. 이 API는 인자로 초기 상태(initialState)를 받고, 반환 값으로 현재 상태(state)와 상태를 설정하는 함수(setState)를 반환합니다.

 

2. useEffect()

useEffect(callback, dependency);

클래스 컴포넌트의 생명주기 메소드 componentDidMount(), componentDidUpdate, componentWillUnmount()를 통합한 것과 같은 API로 side effect를 발생하는 작업을 수행하는 훅 API입니다. Side effect란 다른 컴포넌트에 영향을 줄 수 있고 렌더링 과정에서는 구현할 수 없는 작업을 일컫는데요, 그 예로는 컴포넌트 안에서 데이터 가져오거나 구독하기, DOM을 직접 조작하기 등이 있습니다.

 

3. useContext()

인자로 context 객체를 받아 객체의 현재 값을 반환합니다. context 객체는 useContext가 호출된 컴포넌트에서 가장 가까이에 위치한 <Context.Provider>의 props로 전달된 value에 따라 값이 변경됩니다. 또한, 값이 변경될 때마다 이 훅을 호출한 컴포넌트는 리렌더링됩니다.

 

4. useReducer()

const [state, dispatch] = useReducer(reducer, initialState, init);

useReducer()는 첫 번째 인자로 현재 상태(state)와 행동(action)을 인자로 받는 reducer 함수를, 두 번째 인자로 상태의 초기값을, 세 번째 인자로는 상태 초기화 함수를 넣고 현재 상태(state)와 액션을 발생시키는 함수(dispatch)를 반환합니다.

 

5. useCallback()

const memoizedCallback = useCallback(callback, dependency);

렌더링 최적화에 사용하는 훅 API로 렌더링 과정에서 두 번째 인자로 주어진 의존 배열(dependency)의 값이 바뀌면 첫 번째 인자로 주어진 콜백함수(callback)를 새로 생성하여 반환합니다.

6. useMemo()

const memoizedValue = useMemo(callback, dependency);

연산 최적화에 사용하는 API로 렌더링 과정에서 두 번째 인자로 받은 의존 배열(dependency)내 값이 바뀌는 경우에만 첫 번째 인자로 받은 콜백함수를 실행하여 구한 값을 반환하는 함수입니다.

7. useRef()

const ref = useRef(initialValue);

함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 하는 훅 API입니다.

const Component = () => { 
    const ref = useRef(null); 
    return ( <div ref={ref}>ref</div>; ) 
}

useRef()는 인자로 받은 값으로 초기화된 변경 가능한 ref 객체를 반환합니다. 이 객체는 컴포넌트의 전 생애주기동안 유지되며, ref.current와 같이 current 속성에 접근하여 현재 가리키는 객체에 접근할 수 있습니다.

또한, 이는 가변 값을 유지하기 편리하다는 장점이 있습니다.

 

전부 제가 직접 작성한게 아니므로, 자세한 내용은 참고블로그 확인 부탁드립니다!!

 

 

함수형에서는 클래스형과 다르게 state를 변경을 못했으나 HOOK이 나와 use함수를 사용해 변경할 수 있다
다른 외부 강의를 들으니 훨씬 이해가 잘 된다. 
지금까지 use를 왜 쓰는지 몰랐는데 이제야 알것 같다. 이론을 알고가자 알아야 보인다

 

 

https://www.youtube.com/watch?v=iY_vmP-Q3Ak 

참고블로그

https://velog.io/@seong-dodo/React-%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-vs-%ED%95%A8%EC%88%98%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8

https://seongdodo.tistory.com/35

https://talking-potato.me/m/52

---

5월 30일 22일차

 저번 토요일밤에 간단히 css틀 잡고 오늘 부터 기능 등 과제를 시작한다 제대로 하는건 처음인지라 많이 어렵기도 했지만 시간이 지나고 저녁에는 리덕스를 만들었고 이것저것 만져보며 계속 찾아가고있다. 강의를 보면서 하니 좀 할만한것  같기도 하지만 파이어스토어는 조금 멈칫하는 부분이 있었다. 그래서 내일 다시 만져봐야되고 리덕스 목록추가도 다시 해보려고한다. 내일 보자

 

5월 31일 23일차

  벌써 5월이 지나고 현재는 주특기 2주차 진행 중이다. 오늘은 과제를 꼭 마무리 한 뒤, WIL영상을 찍는것을 일과로 잡았다. 근데 과제는 점심이 지나도 나아질 기미가 없었고 결국 혼자 고민하다가 팀원에게 도움을 요청했고 물어본 질문 그 이상으로 답변을 받았다. 아직까지 기본 베이스가 없는 상태에서는 이렇게 답이나 다 마무리한 팀원들에게 도움을 구하고 어떻게 진행했는지 듣는게 가장 좋은 것 같다. 아무것도 없는데 여기서 머리를 굴려봤자 모하겠나 응용 할 기초조차 없는데...

그렇게 과제를 제출 후 영상촬영을 마무리하고 스르륵... 내일은 항해톡 준비~

 

6월 1일 24일차

  어제 도움받아 과제를 빠르게 마무리 한 후 오늘 아침부터 항해톡 준비를 시작했다.  아 그리고 매일 cs스터디를 11시에 시작 후 마치고 알고리즘 팀원들과 같이 면접스터디로 한 문제씩 같이 정리해서 이것도 매일 진행중이다. 나중에 머릿속에 한번에 넣으려는 것 보다는 지금 훑어 내용이라도 아는게 참 좋은것 같다. 이론 공부하면서 이해 되는것도 있을거라 생각하니 좋다. 그렇게 항해톡 주제 DOM을 무사히 마쳤고 발표하다보니 점점 긴장되어 말을 좀 빠르게 해서 무슨 말을 했는지 잘 기억이 나지 않는다. ppt를 띄우고 게더가 안보이니 반응도 모르겠고 다음엔 창을 줄이든지 발표 연습을 더 해야겠다. 오늘은 빠르게 12시쯤 들어가서 내일 과제와 리덕스 공부를 하려고 한다. 가보자!

 

6월 2일 25일차

  곧 한달이네.. 요새 무슨 요일인지 헷갈리기도한다;; 오늘 과제 추가사항들을 만져보고 마무리 하려고했는데... 다 할줄 알았는데 하나했다ㅠㅠ 그것도 알고리즘 팀원분들이 도와줘서 했다! 생각보다 너무 어렵다 시간을 더 써야하는데 어떻게하면 가성비 좋게 쓸수있을까. 이미 실력들이 점점 벌어지고 있어서 쫓아가기에는 노력 뿐인가 싶다 더 효율적으로 해야하는데 일단 내일 심화 주차가 시작이다.. 이제 진짜다 더 열심히해야되고 잘해야한다. 정리는 기본이다 잠은 주말에 자라

 

6월 3일 26일차

  오늘 아침 찬물 샤워 하면서 기분 좋다고 되뇌이니 아침 시작 부터 텐션이 높아졌다.심화 주차가 발제 되었다. 큰일났따. 이거 더 잘해야한다 강의를 보는 시간도 오래걸리고 뭔지도 모르겠고 일단 빠르게 듣고 과제를 직접하면서 찾아보려고한다 내일 까지는 과제 시작할 수 있을 만큼 들어 놓자

 

6월 4일 27일차

  이제 점심 지나면 되게 덥다. 에어컨이 없으니 선풍기를 사야하나보다 뭐로 살까? 큰거? 아니면 탁상용으로.?

고민고민하지마 코드부터 해보자 이제 큰 벽이 나에게로 온다 뿌셔뿌셔! 불고기맛! 내일은 등산 갔따오렵니다 산의 정기를.