코드스테이츠(TIL 3일)

React

오늘은 아직 어색하고 내적친밀감은 있지만 가까운사이가아닌 React를 복기 해볼려고 합니다.

일단 기초부터 보자면 리액트는 페이스북이 만든 사용자 UI구축을 위한 라이브러리라고 합니다. 사용자의 View에 초점을 맞추고 있고 3가지의 대표적인 특징을 가지고 있다고 합니다.
1. jsx문법
jsx는 자바스크립트 안에서 HTML문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 줍니다.

class HelloMessage extends React.Component {
 render() {
   return (
     <div>
     hello {this.props.name}
 		</div>
	)
	}
}

코드를 보면 HTML태그가 있습니다 이처럼 js안에서 저런 문법을 사용하게 해줍니다 이러한 편리함은 리액트의 사용성 많이 증가시켰다고 합니다.

2. Component 기반
   리액트는 컴포넌트 기반 라이브러리라고합니다. 기존의 웹페이지를 작성할 때 처럼 하나의 HtML코드를 집어넣고 하는 것이 아닌, 여러 부분을 분할해서 코드의 재사용성과 유지보수성을 증가시켜줍니다. 만약 프론트를 작성한다고 가정할때 아주 긴 HTML코드를 적을 때가 있을 텐데, 그 코드의 일부를 수정해야 한다고 할 때 그 부분을 찾는 것부터 시작해서 내가 지금 수정한 코드의 부분만 수정되어야 하는데, 잘못하고 다른 부분을 건드리면 문제를 해결하는게 아니고 문제를 키우게 됩니다. 컴포넌트 기반인 리액트로 개발을 하면 HTML코드를 부분 부분 파일로 담아서 어떤 부분을 수정해야 한다고 하면 그 부분의 파일만 수정하면 됩니다.

3. virtual DOM (가상 DOM)
   이 부분이 이해가 가장 어려웠습니다 일단 제가 배웠던 DOM은 문서 객체 모델이라고 하는 HTML단위 하나하나를 객체로 생각한 모델이라고 이해를 했는데 DOM의 구조는 트리구조로 되어 있어서 어떠한 DOM의 요소를 하나 수정하는 함수를 만들고자 하면 불필요한 연산이 매번 일어날수있다고 합니다 이렇게 매번 재생성되는것을 피하고자 가능한 한번에 모든작업이 진행되는것을 바라는데 이문제를 해결하고자하는 것이 가상 DOM이라고 합니다.

이는 변화를 가상 돔에서 미리 인지해서 변화를 시킵니다. 실제 DOM이 아닌 가상DOM이기 때문에 렌더링도 되지않고 연산 비용이 비교적 실제보다 적어서 모든 변화를 한번에 렌더링되게 해줍니다.
만약 직접 DOM을 업데이트하게 된다면 그 부분만 업데이트하기 위해서 업데이트 하지 않은 부분과 업데이트된 부분을 알고 있어야 하는데, 가상 돔은 바뀌지 않은 부분과 바뀐 부분을 자동으로 감지해서 업데이트 시켜줍니다.
또한, 변경하려는 DOM이 변경되었는지, 변경되지 않았는지에 대한 각 동기화 정보를 알고 있을 필요가 없음과 동시에 하나로 묶어서 작업해주기 때문입니다.결론적으로 가상 DOM을 사용하는 이유는, 실제 DOM을 직접 변경할 수는 있지만, 그 작업이 굉장히 값비싼 작업이기 때문에, 가상 돔에서 미리 최적화를 한 번 해준다는 것 입니다.

이러한 3가지 특징을 알아보았고 실제로 사용할때 이해가 어려웠던부분을 다시 알아보겠습니다.
스프린트 과제들중 App.js와 index.js를 예로 들때

• render() 메소드는 리액트 컴포넌트인데, 화면에 html 뷰를 생성해주는 역할을 합니다. return 으로 받는 값들은, 나중에 html 코드로 바뀌게 됩니다. 그렇게 생성된 App 클래스를 export 문법을 이용해서 내보냅니다.
  -App을 불러와 사용할 때에 html 코드를 사용하는 걸 () 볼 수 있는데, 모든 리액트 파일들은 전부 html 코드 처럼 사용할 수 있습니다. 이를 통해서 알 수 있는 것은 html 코드를 여러 개의 리액트 파일로 분할해서 작업을 할 수가 있다는 것 입니다. 또한 그렇게 되면 여러 사람이 협업을 하는 것도 쉬워지고, 코드의 수정도 특정 부분만 하면 되기 때문에 이점이 많아지게 됩니다.

그리고 정말 중요한 props와 state..
리액트 컴포넌트에서 다루는 데이터는 두개로 나뉩니다. 바로 props 와 state 인데요, 미리 요약하여 설명드리자면 props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값입니다. 자식 컴포넌트에서는 props 를 받아오기만하고, 받아온 props 를 직접 수정 할 수 는 없습니다.

반면에 state 는 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있습니다.

import React, { Component } from 'react';

class MyName extends Component {
  render() {
    return (
      <div>
        안녕하세요! 제 이름은 <b>{this.props.name}</b> 입니다.
      </div>
    );
  }
}

export default MyName;

새로운 컴포넌트를 만들고 자신이 받아온 props의 값은 this. 로 조회할수있습니다

import React, { Component } from 'react';
import MyName from './MyName';

class App extends Component {
  render() {
    return (
      <MyName name="리액트" />
    );
  }
}

export default App;

이렇게 import를 통해 컴포넌트를 불러오고 랜더링을 한뒤 일반 태그를 작성하듯이 작성을하면 props의 값 name에 "리액트"라고 들어가 있어서 브라우저를 열면 '안녕하세요! 제 이름은 리액트입니다. ' 라고 나옵니다 ㅎㅎ