화면이 바뀌면서 어떤 요소가 바뀌는 것인지 파악하여 어떤 것을 state로 설정해야할지 찾는 연습이 필요하다.
-
✨ render() 안에 jsx로 작성하는 return문에서는 for문(반복문)과 if문(조건문)을 사용하지 못한다!
-
에러 발생하지 않고 조건부 렌더링하는 방법
- render() 안에 조건문은 조건부 연산자(삼항 연산자)를 이용해 작성한다.
- 또는 AND 연산자(&&)를 사용해 조건부 렌더링을 구현할 수 있다.
-
보여줄 내용이 없어서 태그를 보여주고 싶지 않을 때, 조건부 연산자를 사용해
null이라 작성한다.
(🔆 jsx에서 false, undefined, null은 태그 없음을 의미한다)
만약, 조건문을 이용해 아래의 상황을 작성하지 않으면 'result'라는 state가 없을 때 에러💥가 발생한다.
// 조건부 연산자(삼항 연산자) 예시
{this.state.result.length === 0
? null
: <div>결과: {this.state.result}</div>
}
// AND 연산자(&&) 예시
{this.state.result !== 0
&& <div>결과: {this.state.result}</div>
}-
리액트는 항상 자바스크립트 역할만 담당한다. (html과 css 그대로 사용하면 된다)
-
class를 사용하는 경우
state와props를 미리 구조분해할당하는 것이 깔끔하다.
(ex. 매번this.state.result로 쓰지 말고 ,
const { result } = this.state; 하여 result로 작성하기) -
state가 바뀌면 렌더링이 다시 시작하기 때문에 렌더링이 되고 싶지 않은 경우에는 별도로 작성하여 this.time 처럼 사용하면 된다.
-
state 또는 props가 변경되어 렌더링되는 경우 같이 렌더링될 필요 없는 state는 각각의 컴포넌트로 분리하여 성능 최적화하는 것이 좋다.
-
클래스 컴포넌트는 render()만 실행되지만, 함수형 컴포넌트는 전체가 통째로 실행된다.
함수형 컴포넌트에서 계속 렌더되는 문제를 방지하기 위해 'useMemo' 또는 'useCallback'라는 제공된 Hooks를 사용한다.
- 클래스에서는 ref를 DOM에 직접 접근할 때만 사용했었지만, 함수에서는
this의 속성들을 useRef라는 Hook을 사용해 표현한다. (ref의 추가적인 기능!)
ref는 안에 current가 들어있기 때문에 값을 가져올 때와 같이 ref를 사용한 속성을 사용할 때는current로 접근해야하므로 항상❗ '속성명.current' 와 같이 작성한다.
// useRef 예시
const timeout = useRef(null);
const endTime = useRef();
timeout.current = setTimeout(() => {
}, 1000);
endTime.current = new Date();- useState와 useRef의 차이?!
useState에서 state가 변경되면 실행되는 함수로 인해 return문이 다시 실행됨useRef로 설정한 값이 변경될 때는 return문이 다시 실행되지 않음!❌ (불필요한 렌더를 막을 수 있음)
📌 값이 바뀌어도
다시 렌더링하고 싶지 않고,화면에 영향을 주고 싶지 않은 값들은 useRef에 넣어서 사용한다.
값을 ref에 대입한다고 다시 렌더링이 되지 않고, 값을 잠깐 기록해두는 것이다.
주로 ref 안에 넣어서 사용하는 값
- timeout이나 interval
- 화면에는 바뀌지 않지만 값이 자주 바뀌는 값
- jsx에 중괄호({ })를 사용하면 안에 자바스크립트를 작성할 수 있고,
- jsx에서는 불가하지만 함수 안에서는 if문, for문을 사용할 수 있는 점을 이용해 조건문과 반복문을 작성할 수 있다. (그러나 잘 사용하지 않음)
*출처: Youtube ZeroCho TV 리액트 기본 강좌
