실전 리액트 프로그래밍

개요

3장과 4장 중 스터디에서 할만한 목차, 혹은 복습하면 좋을 내용 뽑아내기

0. state 업데이트는 비동기적일 수도 있다
1. 리액트 요소가 돔 요소로 만들어지는 과정
2. 콘텍스트 API 로 데이터 전달하기
3. ref 속성과 forwardRef 사용하기
4. 가독성을 높이는 컴포넌트 파일 작성법

---

**사용자 정의 컴포넌트는 반드시 대문자로 시작해야한다

Element가 소문자로 시작하는 경우에는 <div> 나 <span> 같은 내장 컴포넌트라는 것을 뜻하며 'div' 나 'span' 같은 문자열 형태로 React.createElement에 전달됩니다.
<Foo />와 같이 대문자로 시작하는 타입들은 React.createElement(Foo)의 형태로 컴파일 되며 JavaScript 파일 내에 사용자가 정의했거나 import 한 컴포넌트를 가리킵니다.

0. state 업데이트는 비동기적일 수도 있다

onClick = () => ({
	this.setState({count : this.state.count + 1});
    this.setState({count : this.state.count + 1});
})

이 코드의 의도한 바는 count 상태값을 두 번 증가시키는 것이다.
하지만 결과는 1만 증가한다. 이는 setState 메서드가 비동기로 동작하기 때문이다. 리액트는 여러 개의 setState 메서드를 배치(batch)로 처리한다.
따라서 위 코드는 아래와 같이 함수 인수로 해결한다.

onClick = () => {
	this.setState(prevState => ({count : prevState.count + 1}));
    this.setState(prevState => ({count : prevState.count + 1}));
};

setState 메서드로 입력된 함수는 자신이 호출되기 직전의 상태값을 매개변수로 받는다

1. 리액트 요소가 돔 요소로 만들어지는 과정

컴포넌트의 state는 해당 컴포넌트가 관리하는 데이터고, 속성값은 부모 컴포넌트로부터 전달받은 데이터이다.
그리고 리액트에서는 ui 데이터를 반드시 state와 속성값으로 관리해야 한다.

1) ReactDOM.render 함수가 호출되고 최초의 렌더 단계가 실행된다.
2) 이렇게 만들어진 가상 돔이 실제 돔으로 만들어진다.
3) 이때 클래스형 컴포넌트는 인스턴스로 만들어지고 리액트 내부에서 관리된다.
4) 사용자의 행위로 state 값이 변경된다.
5) 두 번째 렌더가 실행되고 새로운 가상 돔이 만들어진다.
6) 이전 가상돔과 비교해 변경된 부분만 실제 돔에 반영된다.

2. 콘텍스트 API 로 데이터 전달하기

Context API를 사용하면 조상에서 부모를 거쳐 자식에게 전달할 필요 없이, 조상에서 바로 자식에게 데이터를 내려줄 수 있다.

3. ref 속성과 forwardRef 사용하기

돔 요소에 직접 접근해야 할 때 ref 속성을 사용한다.
ex) 돔 요소에 포커스를 주거나, 돔 요소의 크기, 스크롤의 위치를 알고 싶은 경우
forwardRef를 사용하면 ref 속성을 그대로 사용 가능하다.

const TextInput = React.forwardRef(
	(props, ref) => (
		<div><input type="text" ref={ref} /></div>
	) 
);

class Form extends React.Component{
	// ...
    render () {
    	return (
        	<div>
            	<TextInput ref={this.textRef} />
            </div>
        )
    }
}

4. 가독성을 높이는 컴포넌트 파일 작성법

1) 파일의 상단에서 속성값 타입을 정의한다.
2) 함수형 컴포넌트의 매개변수는 구조분해를 이용해 명명된 매개변수로 정의한다.
3) 컴포넌트에서 사용되는 변수와 함수는 컴포넌트 코드 밑에 작성한다.
4) export 코드는 파일의 가장 밑에 작성한다. (고차 컴포넌트를 사용하기 좋다)