벌써 항해 4주차 WIL 이라니!! 시간이 빠르다
리액트에 대해 조금 감으려하니 리덕스라는게 또 나왔다. 근데 상태흐름이 정리되어있어 개념만 잘 이해하면 괜찮은 개념이었던 것 같다. 비록 그게 엄청 오래 걸렸지만...
이번에도 개인과제를 제출 하루전에 겨우 시작했다 ㅎㅎ 그래도 개념을 잘 훑은 것 같아서 만족스러웠다!! setState를 처음 접했을 때보다 redux와 router까지 배워서 구현하니 좀 더 형태가 잡히는 기분?? 짧은 시간 안에 많은 개념을 숙지해야해서 벅차지만 완벽함에 집착하기보다 경험이라고 생각하고 겪어보려 한다. 다른분들은 이해도 빠르고 구현도 쓱싹 해내서 비교하면 한도끝도 없이 내가 작아지지만 너무 그렇게 생각하지 않기로 했다!
그냥 예시코드보고 구현한건데 자운 매니저님이 많이 발전했다고 해주셔서 은근 기분이 좋았다는... 진짜 발전한건지는 모르겠지만 ㅎㅎ 2주동안 자운매니저님의 혹독한 개인과외가 아주 만족스러웠다! 2주동안 같은 팀이었던 팀원들도 너무 정들었다 ㅎㅎ
라이프사이클(클래스형 vs 함수형)
리액트의 컴포넌트는 라이프사이클이라 불리는 수명주기가 존재
위의 그림처럼 mounting(생성)-updating-unmounting(제거) 이다.
mounting : DOM이 생성되고 웹 브라우저 상에 나타나는 것을 뜻함
updating : 다음과 같은 4가지 상황에서 업데이트가 발생
props가 바뀔 때
state가 바뀔때
부모 컴포넌트가 리렌더링 될 때
강제로 렌더링을 트리거할 때
unmounting : DOM에서 제거 되는 것을 뜻한다.
- constructor(생성자)
클래스형 컴포넌트를 만들 때 처음으로 실행. 이 메서드에서는 초기 state를 정할 수 있다.
함수형 컴포넌트에서는 useState를 사용하면 초기 상태를 쉽게 설정할 수 있다. - componentDidmount
이 메서드는 컴포넌트를 만들고 첫 렌더링을 마친 후 실행. 함수형 컴포넌트에서는 uesEffect를 활용하여 구현. - componentDidUpdate
이메서드는 리렌더링을 완료한 후 실행. 함수형 컴포넌트에서는 useEffect를 활용하여 구현 - componentWillUnmount
이 메서드는 컴포넌트를 DOM에서 제거할 때 실행된다. componenetDidMount에서 등록한 이벤트가 있다면 여기서 제거 작업을 해야한다. 함수형 컴포넌트에서는 useEffect를 활용하여 구현
: 리액트는 클래스형과 함수형으로 컴포넌트를 생성할 수 있는데, 주로 함수형 컴포넌트가 많이 사용된다.
: 이제 클래스형은 사용하지 않는다고 리액트에서 공식 발표를 했다고 한다.
: 함수형 컴포넌트의 가장 큰 장점으로는 간단하게 함축적인 프로그래밍이 가능하다는 것
-
클래스형 라이프사이클
: render() 메소드와 Component 상속 필수
: state, props 사용이 불편하고, 많은 메모리 사용한다는 단점이 있다. -
함수형 라이프사이클
: 간편한 컴포넌트 선언 및 프로그래밍 가능 React Hook을 사용
: state와 생명주기(Life Cycle) 메소드를 별도로 구현해야 함 => useState, useEffect 사용
react hooks
: React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이 state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리
개발과정
: 클래스 컴포넌트 사용 -> 데이터 캐시 개발 -> 함수 컴포넌트 + 리액트 훅 사용
: 함수 컴포넌트가 어떤 값을 유지할 수 있도록 캐시 만듦
: 이 캐시를 이용하고자 만든 여러개의 API를 '리액트 훅' 함수라고 부름
필요성
: 함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있음
: 함수 컴포넌트는 클래스 컴포넌트와 달리 모듈로 활용하기 쉬움
사용 규칙
: 같은 훅을 여러번 호출할 수 있음
: js의 block scope는 block외에서 사용할 수 없으므로 함수 컴포넌트 몸통이 아닌, 몸통 안 복합 실행문의 {} 안에서는 사용할 수 없음
: 비동기함수 (async 키워드 붙은 함수)는 콜백함수로 사용할 수 없음
종류
- useState
: 컴포넌트의 state(상태)를 관리 할 수 있다. 상태에 따라 다른 화면 출력 - useEffect
: 렌더링 이후에 실행할 코드를 만들수 있다. 어떤 변수가 변경될때마다(의존성) 특정기능이 작동하도록 할 수 있다. - useContext
: 부모컴포넌트와 자식컴포넌트 간의 변수와 함수를 전역적으로 정의할 수 있다. - useReducer
: state(상태) 업데이트 로직을, reducer 함수에 따로 분리 할 수 있다. - useRef
: 컴포넌트나 HTML 요소를 래퍼런스로 관리할 수 있다. - forwardRef
: useRef로 만든 래퍼런스를 상위 컴포넌트로 전달할 수 있다. - useImperativeHandle
: useRef로 만든 래퍼런스의 상태에 따라, 실행할 함수를 정의 할 수 있다. - useMemo, useCallback
: 의존성 배열에 적힌 값이 변할 때만 값,함수를 다시 정의할 수 있다. ( 재랜더링시 정의 안함 ) - useLayoutEffect
: 모든 DOM 변경 후 브라우저가 화면을 그리기(render)전에 실행되는 기능을 정할 수 있다. - useDebugValue
: 사용자 정의 Hook의 디버깅을 도와준다.
