Front-endReact

React 3일차

⏱ 읽기 소요 시간: 9 분

요소(element) 렌더링

요소는 React 앱에서 가장 작은 단위의 재료입니다.

요소는 화면에 표시하고자 하는 내용을 서술합니다.

  • React는 element를 받아서 화면에 그려주는 기능을 하는 라이브러리

브라우저 DOM 요소와 달리, React 요소는 순수한 객체이며 생성 비용이 저렴합니다.

생성 비용?

  • ex) video태그, img태그 등은 비용이 많이 든다. (자바스크립트 실행 속도가 느려질 수 있다. 이 태그를 만들어내는 데 계산이 오래 걸리기 때문에, cpu 메모리가 많이 사용된다.)
  • React DOM이라는 라이브러리가 개발자 대신에 알아서 DOM 요소 객체를 생성해서 appendChild 등을 해서 HTML문서에 넣어준다.

DOM에서 요소 렌더링하기

  • React로 구축한 어플리케이션은 보통 하나의 루트 DOM 노드를 가진다.
  • React 요소를 루트 DOM 노드에 렌더링하고 싶다면, ReactDOM.render() 에 둘 다 넘겨주면 됩니다.
  • ReactDOM 라이브러리에

  • 첫 번째 인수로 element를 넘겨주고, 두 번째 인수로 어디에 그려줄 것인지를 써준다.

  • 우리는 2가지 라이브러리를 사용하는 것이다.

    • React 라이브러리
    • ReactDOM 라이브러리
  • cf)
  • 브라우저 DOM에 그리고 싶을 때 - ReactDOM라이브러리를 사용
  • 모바일 앱에 그리고 싶을 때 - React Native를 사용(사용법은 많이 다름)

렌더링된 요소 업데이트

React 요소는 변경 불가능 합니다. 한번 요소를 만들었다면, 그 자식이나 어트리뷰트를 변경할 수 없습니다.

중요!!

  • 불변성(Immutability)
  • 변경할 수 없다.
  • 값을 변경하고 싶을 때는 값을 새로 만든다.
    • React 요소는 사실 그냥 객체이기 때문에 변경 불가능하다는 의미는, 진짜 변경할 수 없다는 게 아니라 변경하고 싶으면, 처음부터 싹 새로 만든다는 의미이다.
  • React는 화면을 조금이라도 바꾸고 싶으면, element를 처음부터 다 다시 그린다.
  • 상태가 조금이라도 바뀌면, render메소드가 다 호출되고, React element가 맨 위에 있는 부모부터 가장 아래에 있는 자식까지 다~~~ 다시 그려지는 방식이다.
  • Developer가 React element를 직접 변경할 일은 없다.
    요소는 영화의 단일 프레임에 비유할 수 있습니다. 즉, 요소는 특정 시점의 UI를 표현할 뿐입니다.

이제까지 배운 것만 가지고 UI를 갱신할 수 있는 유일한 방법은 새로운 요소를 만들어서 이 요소를 ReactDOM.render() 로 전달하는 것입니다.

  • 보통 실무에서는 setState로 상태를 변경한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
// 실무에서 활용되는 방법은 X
function tick() {
  // toLocaleTimeString()는 사용자가 사용하는 시간으로 만들어주는 메소드
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById("root"));
}
// tick이라는 함수가 1초에 한 번씩 실행됨
setInterval(tick, 1000);

이 예제는 setInterval() 콜백을 이용해 매 초마다 ReactDOM.render() 를 호출하고 있습니다.

Note:

실무에서, 대부분의 React 어플리케이션은 ReactDOM.render() 를 한 번만 호출합니다. 다음 섹션에서는 이러한 코드가 어떻게 상태를 갖는 컴포넌트 로 캡슐화 되는 지 배울 것입니다.

서로가 서로를 기반으로 만들어져 있기 때문에, 이 주제를 건너뛰지 않는 걸 권장합니다.

React는 꼭 필요한 부분만 갱신합니다

  • 상식으로 알고 있을 내용: DOM Tree에서 변경된 부분을 브라우저가 보라색으로 보여준다.

컴포넌트와 props

  • 컴포넌트를 통해 UI를 독립적이고 재사용 가능한 부분으로 분리하고, 각 부분을 독립적으로 생각할 수 있습니다.

  • 개념상 컴포넌트는 자바스크립트 함수와 비슷합니다. “props”이라 불리는 임의의 입력을 받아들이고, 화면에 무엇이 표시되어야 하는지를 서술하는 React 요소를 반환합니다.

컴포넌트 렌더링

  • 함수는 긴 코드뭉치에 이름을 붙인 것임

  • 그 함수의 이름만 기억해서 그 긴 코드를 실행시키는 것임

  • 긴 엘리먼트를 생성하는 컴포넌트에 이름을 붙여서 사용할 수 잇는 것임

1
2
3
// 컴포넌트 안에 많은 엘리먼트들이 들어있지만 모든 내용을 개발자가 기억하고 사용하는 게 X
// 사용자 정의 컴포넌트의 이름을 그 기능을 잘 나타내주는 이름으로 붙여주어 사용한다.
const element = <Welcome name="Sara" />;

컴포넌트 조립하기

  • 제일 위에 있는 컴포넌트를 App이라고 부르는 게 관례이다.

컴포넌트 추출

Props는 읽기전용입니다

  • props는 무슨 일이 있어도 수정하지 말 것
  • props는 부모로부터 데이터를 받으면 props에 들어있는 거고, props를 수정하지 않아야 한다.
1
2
3
function sum(a, b) {
  return a + b;
}
  • 입력을 변경하지 않고, 동일한 입력에 대해 항상 동일한 결과를 반환하는 함수를 순수함수(pure function)라고 한다.
1
2
3
4
5
// 계좌에서 돈을 인출할 때
// 이 함수는 입력을 변경하기 때문에 순수하지 않다.
function withdraw(account, amount) {
  account.total -= amount;
}
  • render 메소드 안에서는 같은 입력이 들어왔을 때, 같은 출력이 나가게 만들어줘야 한다. ex) render 메소드 안에 Math.random()을 사용하지 X!!
  • React에서 render 메소드가 호출되는 것을 개발자가 컨트롤할 수 없다.
  • render 메소드 안에 Math.random()을 사용하면, 화면이 다시 그려질 때마다 출력이 계속 달라지기 때문에 화면이 예상치 못한 순간에 이상하게 나오는 버그가 발생할 수 있다.
Share