Today I learned
- Ref
- React 생명주기
- 함수형 컴포넌트
@@ 오늘은 리액트의 라이프 싸이클, ref 사용법, 함수형 컴포넌트에 대해서 공부해 봤다. 기존에 배웠던 라이프 싸이클 주기에 넘어서, 배우지 않았던, 새로 추가된 메서드인 getDerivedStateFromProps메서드와 getSnapshotBeforeUpdate에 대해서 배워봤다. props를 state로 연결할 때, 그리고 업데이트 직전에 실행되는 메서드인데, 특히 스냅샷을 return 하면 componentWillUnmout에서 활용 가능한 점이 새로웠다. 이벤트나 돔 조작시 활용할 수 있을 듯 하다.
더불어 CSS 모듈 및 컴포넌트 스타일링에 대해서 공부했는데 이는 내일 정리를 마쳐서 올리고자한다.
Ref
-
DOM을 직접적으로 건드려야할 때 ref를 사용한다.
-
DOM을 꼭 사용해야만 하는 상황
1) 특정 input에 포커스 주기
2) 스크롤 박스 조작하기
3) canvas 요소에 그림 그리기 등
-
ref를 사용하지 않고도 해당 기능을 구현할 수 있는지 고려 후 활용한다
-
다른 컴포넌트와의 교류할 때 ref 를 사용하면 안된다.
-
DOM뿐 아니라 컴포넌트에도 ref를 달 수 있다.
- 해당 컴포넌트의 메서드, 변수에도 접근할 수 있다.
-
-
사용방법
-
ref을 달아야하는 DOM에 props를 주듯 ref를 달아준다.
<input ref={(ref)=> {this.input=ref}}></input>s -
위처럼 설정하면 this.input은 해당 input DOM을 가리킨다.
-
React 생명주기
- React 컴포넌트가 업데이트 되는 때는 네가지 경우다
- props가 바뀔 때
- state가 바뀔 때
- 부모 컴포넌트가 리렌더링 될 때
- this.forceUpdate로 강제로 렌더링을 트리거 할 때
.
-
render()
라이프 사이클 메서드 중 유일한 필수 메서드
메서드 안에서 this.props와 this.state에 접근할 수 있으며, 리액트 요소를 반환한다.아무것도 보여주고 싶지 않다면 null 값이나 false값을 반환한다.
렌더 함수 안에서는 절대로 state를 변형해선 안된다. 웹 브라우저에 접근해도 안된다. DOM 정보를 변화를 줄 땐 componentDidMount에서 처리해야 한다.
-
constructor 메서드
-
컴포넌트의 생성자 메서드다. 컴포넌트를 만들 때 처음 실행된다. 이 메서드에선 초기 state를 정할 수 있다.
-
strict Mode 에서는 예측 불가능한 버그를 막기 위해서 constructor 와 렌더가 두번씩 불린다.
-
-
getDerivedStateFromProps메서드
v16.3 버전 이후에 추가된 메서드.
최초 마운트시와 갱신시 모두에서 렌더 메서드를 호출하기 직전에 호출된다.
props 로 받아온 값을 state에 동기화 시킨다.
이전 스테이트값이 받아온 props값과 다를 경우에 이를 스테이트에 반영한다.
컴포넌트 인스턴스에 접근할 수 없다.
이유와 상관없이 렌더링마다 매번 실행된다.
-
componentDidMount
컴포넌트를 만들고 첫 렌더링을 마친 후 실행. 자바스크립트 라이브러리 또는 프레임워크의 함수를 호출하거나 이벤트 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기 작업을 처리하면 된다.
-
shouldComponentUpdate
props나 state 를 변경했을 때 리렌더링을 할지 결정하는 메서드.
이 메서드는 반드시 true 나 false값을 반환해야 한다. 컴포넌트를 만들때 이 메서드를 따로 생성하지 않으면 기본적으로 true값을 반환한다.
false값을 반환하면 업데이트 과정은 여기에서 중지된다.
초기 렌더링이나 forceUpdate()가 사용될 때는 호출되지 않는다.
(성능 최적화를 위한 메서드)
렌더링 방지 목적으로 사용할 경우 버그로 이어질 수 잇다.
-
getSnapshotBeforeUpdate
render메서드를 호출한 후 DOM에 변화를 반영하기 직전에 호출하는 메서드.
componentDidUpdate 에서 세번째 파라미터인 snapshot 값으로 전달
업데이트 하기 진적의 값을 참고할 일이 있을 때 활용 된다 ( 스크롤바 위치 유지 등 )
여기에서 값을 반환하면 componentDidUpdate에서 세번째 파라미터 값으로 받게 된다 ( snapshot )
-
componentWillUnmout
컴포넌트를 DOM에서 제거할 때 실행.
등록한 이벤트, 타이머, 직접 생성한 돔이 있다면 여기서 제거작업을 수행한다.
참고: 리액트를 다루는 기술, 김민준 저, 2018
함수형 컴포넌트
- 순수함수만으로 컴포넌트 선언.
- 함수형 컴포넌트의 성능이 클래스형 컴포넌트보다 조금 더 빠르다.
- 리액트 프로젝트에서는 state를 사용하는 컴포넌트 개수를 최소화 하는 것이 좋다.
