22. React - Intro & 12 main concepts (Getting start, JSX, Rendering Element)

1. What is React?

1) React란?

 

출처: https://ko.reactjs.org/ 리엑트 공식문서 너무 잘되어있어서 감동 

 

React는 Component(하나의 의미를 가진 독립적인 단위 모듈 - 쉽게 말해 나만의 HTML 태그)를 사용하는

사용자 인터페이스를 만들기 위한 프론트엔드 라이브러리이다. 

그러니까 주요 단어가, Component, 사용자 인터페이스(UI), 라이브러리 이다. 

 

먼저 사용자 인터페이스는 사용자와 프로그램이 정보를 주고받기 위해 사용자와 프로그램이 상호작용하는 프로그램의 일부분이다. 

그리고 라이브러리란, 특정 기능에 대한 API(도구/함수)를 모은 집합니다. (동기이신 SH님께서 쉽게 정리해주신 글을 참고하면) 미리 만들어 둔 여러가지 템플릿을 모아둔 저장소이다. 

※ 프레임워크와 라이브러리의 차이점은 여기에..

그럼 Component는? 

위에서 언급했듯이 '하나의 의미를 가진 독립적인 단위 모듈 - 나만의 HTML 태그'이다. 예를 들어 보는게 더 이해가 직관적으로 된다. 

React를 배우기 전, 지금까지 Web page를 만드는 방식은 HTML, CSS를 이용해서 화면을 구성하고 Javascript를 사용해서 동적인 액션기능을 추가하는 것이었다. 그러니까, 아래 사진과 같이 코드가 작성되고, 그에 맞는 화면이 출력되었다. 

 

출처: codestates

 

React라는 front-end 라이브러리를 사용하면, component라는 것을 사용할 수 있고, 

 

출처: codestates

 

이처럼 원래 <Tweet></Tweet>라는 태그는 없지만, 이런 하나의 의미를 가진 태그인 component를 만들어서 사용할 수 있다.

2) 왜 React와 같은 front-end 라이브러리를 써야 하는가?

(React와 같은 Component 기반 라이브러리를 왜 사용해야 한는지 그 목적을 이해할 수 있어야한다. )

① Web page는 user와 수많은 interaction이 발생하게 된다. 그러면 수많은 상태 관리가 필요하다.

예를 들어, 배경 이미지를 바꾸는 버튼을 눌렀을 때

1. 바꿀 이미지 DOM을 찾는다.

2. 이미지 DOM의 소스를 바꿀 이미지로 바꿔준다.

3. 바뀐 이미지를 화면에 다시 띄워준다.

와 같은 수많은 상태 관리가 필요한 것이다. (관리해야하는 DOM이 너무 많음)

그래서 DOM과 상태값 관리를 최소화해주고, 오직 기능 개발에만 집중할 수 있는 방법을 고민했고, 이에 대한 해결책으로 front-end 라이브러리인 React라이브러리(프레임워크)가 등장했다.

어떻게?? Virtual DOM을 통한 rendering! React는 virtual DOM을 통해 변화를 가상 DOM에 먼저 적용한 후, 비교를 통해 변화된 부분만 render하므로 연산을 줄여준다. 

※ Virtual DOM..? 은 더보기

Virtual DOM

• React 컴포넌트는 render를 호출하여 새로운 결과값을 return 합니다. 그렇지만 return 값은 바로 DOM 에 반영되지 않습니다. 다시 말해, 바로 브라우저에 render 되지 않습니다!
• React에서는 Virtual DOM이라는 개념이 등장합니다.
  1. 컴포넌트가 랜더될 때, return 값을 토대로 Virtual DOM이 생성됩니다.
  2. 이전 브라우저에 보여지고 있는 DOM과 비교하여, 변경된 부분을 확인하고
  3. 변경된 부분만 우리에게 보여지는 DOM 에 적용합니다.

[번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 - 왜 Virtual DOM 인가?

 

② 재사용성, 유지보수에 용이하다. 

우리가 HTML 태그를 여기저기 사용가능한 것과 같이 내가 특정 기능을 하는 component를 만들었으면 그 용도가 필요한 곳에 여기저기 사용할 수 있고, 수정할 것이 생기면 딱 그 component를 구현한 코드만 수정해주면 된다. 

2. React를 시작하기 전에 알아야 할 것 - ES6

 React는 기본적으로 ES6를 사용하고 있어서, ES6 문법에 익숙해져야 한다. 그래서 모든 ES6를 알 순 없지만 다음의 7개는 반드시 알고 있어야한다. 
1. Destructuring
2. spread operator
3. rest parameters
4. default parameters
5. template literals
6. arrow function
7. for-of loop

이건,, JavaScript ES6 문법 - 이건 꼭 알고있기 여기서 정리를 해야할 것 같다 ㅠ (아직 미완성)

3. React의 주요 개념들

1) 기본. 가장 기본 틀

 

 

가장 단순한 React 예시는 다음과 같이 생겼다. JS에 해당하는 부분은 

const element = <h1>Hello, world!</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

이렇게도 쓸 수 있을 것이다. JSX가 사용되는 방식으로, JSX로 생성한 element를 render함수로 root이라는 id를 가진 DOMelement에 rendering 해주고 있고, 그 결과 Hello, World!가 화면에 출력된다. 

2) JSX(Javascript XML)

const element = <h1>Hello world!</h1>;

① JSX란?

이렇게 HTML도 아닌것이 JavaScript도 아닌것이 뭐지 싶은게 JSX(Javascript XML)를 사용한 예시다. 

JSX는 Javascript를 확장한 문법으로 우리가 작성한 React의 component를 화면에 보여주기 위해 사용한다. 

공식문서를 보면 "JSX는 React “엘리먼트(element)” 를 생성합니다." 라고 되어있다. Element는 또 뭔가? Element는 화면에 보일 정보를 담고있는 객체 이다. 그러니까 "JSX는 Javascript를 확장한 문법으로 우리가 작성한 React의 component를 화면에 보여주기 위해 사용한다."라는 말이 이해된다. 

 

② 왜 JSX를 사용하는가?

위의 말처럼 화면을 구성하는 것의 핵심은 Element를 생성하는 것이다. 그러면 JSX를 사용하지 않아도 create Element만 할 수 있으면 되지 않으냐고 생각하게 된다. 공식문서에서도 "React는 JSX 사용이 필수가 아니지만,..."이라고 나와있다. 

그리고 JSX는 React를 위해 태어난 새로운 자바스크립트 문법의 확장이기때문에 Bael이라는 것을 사용해서 컴파일하는 과정이 필요하다. 

😒새로운 문법을 배우고, 컴파일을 거쳐야하면서도 JSX를 사용하는 이유가 뭘까? 

아래 예시를 보면 확 와닿을 것이다. 

 

 

JSX를 사용하지 않으면 React.createElements()를 써서 이렇게 코딩해야 하고, 그러면 가독성도 떨어지고, 복잡도는 높아진다.

 

 

 

 

그런데 이렇게 JSX를 사용하게 되면 가독성도 높아지고, 복잡도는 낮아진다.

"React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다." - React 공식문서

 

 

 

 

③ JSX를 사용할 때 규칙

1. 반드시 하나의 element로 모든 element가 감싸야 한다.

틀린 예)

<div>
	<h1>hello</h1>
</div>
<div>
	<h2>world</h2>
</div>

맞는 예)

<div>
  <div>
      <h1>hello</h1>
  </div>
  <div>
      <h2>world</h2>
  </div>
</div>

2. JSX에선 내부의 javascript코드를 사용할 수 있는데, javascript를 작성할 때는 { } 안에서 작성해야 한다.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

3. JSX내부에서는 if문을 사용할 수 없다. 그래서 삼항연산자를 사용해야 한다.

<div>
    (
    	(1+1 === 2)?(<h1>정답</h1>):(<h1오답</h1>)
     )
</div>

4. element의 class 이름을 적용할 때, class가 아니라 className이라고 해야 한다.

     공식문서에는 "경고 JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용합니다. 예를 들어, JSX에서 class는 className가 되고 tabindex는 tabIndex가 됩니다."라고 나와있다. 

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

 

④ JSX는 객체를 표현한다. - JSX는 React “엘리먼트(Element는 화면에 보일 정보를 담고있는 객체)” 를 생성한다. 부분을 더 자세히 보자. 

앞서 살펴본 것과 같이 

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

위의 코드는 아래 코드의  'h1', {className: 'greeting'}, 'Hello, world!' 내용을 React.createElement()로 컴파일 한 것과 동일하다. 

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

그리고 그 컴파일 결과는 다음과 같은 객체를 생성한다. 이를 React Element라고 한다. 

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

즉, React Element는 React.createElement로 만들어진 객체로, 화면에 보일 것에 대한 정보가 담겨있으며 React는 이를 읽고, 사용하여 DOM을 구성한다. 

3) Rendering Element

위에서 JSX를 사용하여(또는 사용하지 않고도) 화면에 보일 것에 대한 정보가 담겨있는 객체인 React Element를 생성하는 것까지 알아보았다. 이렇게 만들어진 React Element를 DOM에 렌더링하는 방법에 대해 살펴보자. 

 

① DOM Element 렌더링

기본. 가장 기본 틀의 예시 다시 사용

HTML 파일: 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 “루트(root)” DOM 노드라고 부르고, 
React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다.

<div id="root"></div> 
<!--이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 “루트(root)” DOM 노드라고 부르고, 
React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다.-->

JS 파일: ReactDOM.render()을 사용해서 React Element를 root DOM에 렌더링 할 수 있다. 

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
//ReactDOM.render()을 사용해서 React Element를 root DOM 노드에 렌더링 할 수 있다. 

위 코드를 실행하면 화면에 “Hello, world”가 보인다. 

 

② 렌더링 된 엘리먼트 업데이트하기

React Element는 불변객체라서 Element를 생성한 이후에는 해당 속성을 변경할 수 없다. 즉, 내용을 바꿔주려면 새로운 Element를 생성하고 이를 다시 ReactDOM.render()로 전달해야한다. 

그러나! React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트한다. 

HTML 파일

<div id="root"></div> 
<!--이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 “루트(root)” DOM 노드라고 부르고, 
React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다.-->

JS 파일

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

에서는 매 초마다 <h2><h2>It is {new Date().toLocaleTimeString()}.</h2>이 부분이 다른 새로운 Element가 전달될텐데, 아래에서 표시된 부분만 업데이트 해준다. 

 

 

 

 

지금까지

React의 필요성과 소개 및

React의 주요 개념 중

1. 기본틀,

2. JSX(JSX으로 Element생성:React.createElement()) ,

3. Element (생성된 Element를 DOM으로 rendering: ReactDOM.render())

에 대해서 알아보았다. 

 

다음 포스팅에는

React의 주요 개념 중

4. Component와 Pros

5. State와 생명주기

6. 이벤트 처리하기

 

에 대해서 정리해볼 것이다. 

 

+ React 공식문서 최고 🥰

 

 

Reference

Getting Started - React

개발환경 - React