[React] React 처음이라면... React란 ? React의 핵심

 

 

 

이 포스팅은 React를 처음 시작하면서  React가 무엇인지와 React에서 알아야할 요소들이 무엇이 있는지 정리하기 위해 쓰여졌습니다. 

 

 

1. React란?

  JavaScript(frontend) + Node.js(backend) 으로 웹 개발을 하면 javascript하나로 개발할 수 있게 된다. 원래 전통적인 웹에서는 서버에서 request에 대한 코드를 받으면 서버가 보내준 것을 랜더링이라는 것을 해주어야한다.

하지만 SPA(Single Page Application)을 사용하면 우리가 바꿔줘야할 일부의 요소만 바꿔줄수 있게 된다. 어떻게 이렇게 간단한 과정으로 바뀌는 것일까? 웹 개발자라면 다들 비동기적 통신이라는 말을 들어봤을 것이다. 웹 브라우저와 웹 서버가 내부적으로 데이터 통신을 할 때 로딩없이 변경 결과를 반영하는 것을 비동기적으로 통신한다고 말한다. 대표적으로는 Ajax가 있다. 더 자세히 말하자면 javascript는 DOM 객체와 Ajax를 이용해 기존에 렌더링 되어있던 data들과 비교를 통해 전체 DOM 객체를 비동기적으로 갱신해 준다는 뜻이다. React는 이런 javascript의 장점을 특화시켜 나온 라이브러리이다. 

 

  또한 React는 View를 개발하는데 초점이 맞춰줘있다. 개발자라면 디자인 패턴중에 MVC나 MVVM같은 단어들을 들어봤을 것이다. 이런 것들중에 React는 오로지 알파벳 V에 해당하는 View에 대한 역할을 집중적으로 담당하는 라이브러리이다. 따라서 오로지 DOM 객체의 갱신 및 이벤트 응답에만 관심을 갖게 된다.  

 

 

 

2. React의 중요 요소

  2.1 컴포넌트

     컴포넌트는 '부분'이며 이것은 즉 '전체' 중 한 '부분'으로써 재사용이 가능한 조각이다. 이것은 즉 UI를 구성하는데 쓰이며 UI의 부분이라고 할 수 있다. 이는 자바스크립는 함수과 같으며 input으로 Props를 받아 화면에 표시한 element를 반환해 준다. 이러한 컴로넌트는 Component의 생성주기(Life Cyle)에 따른 내장 함수를 통해 Component를 제어하고 있다.

 

  2.2 JSX

      JSX는 javascript XML의 약자이다. 이것은 HTML과 유사하지만 다르다. React에서 마크업을 사용하기 위한 문법체계 로 사용되며 HTML 마크업을 표현하는 것이 아닌 HTML 마크업을 그대로 사용한다. 이는 굉장히 개발자에게 편리함을 줄 수 있다.

 

 

  2.3 Virtual DOM

     DOM의 정의는 문서의 구성요소들을 객체로 구조한 것이라고 한다. React는 UI 라이브러리이며 React DOM은 웹 사이트에 출력 즉, render를 도와주는 모델이다. 그렇다면 React에서 쓰이는 Virtual DOM이라는 것은 무엇일까?  Virtual DOM은 DOM을 추상화한 가상의 객체를 메모리에 만들어 놓은 것이다. 즉 DOM을 직접 수정하지 않고 중간단계 Virtual DOM을 거치게 하는 것이다. 프로세스는 Virtual DOMㅇ에 변경 내역을 모아 실제 DOM과 변경된 부분이 어딘지 차이를 판단하고 변경된 부분만 변경해 그에 따른 렌더링을 한번만 하는 것이다. 이는 브라우저의 DOM 자체내의 리소스를 사용하지 않고도 효율적으로 DOM을 갱신할 수 있게 해준다.

 

출처 : https://www.w3schools.com/js/js_htmldom.asp 

 

 

 

  2.4 많은 사용자

       React는 해외 국내 구분할 것 없이 제일 많이 사용하고 있다. 그래서 초보 개발자가 접하기에 무리가 없다. 

 

 

 

3. props & State

   리엑트 컴포넌트 객체에서 DOM객체를 제어하기 위해서 사용되는 것이 바로 Props와 state이다. 이 두가지를 이용해 자식 컴포넌트에서 부모 컴포넌트를 받아와 출력해주고, 출력해주는 부분들을 수정할 수도 있다. 여기서 React는 부모 컴포넌트에서 자식컴포넌트로 데이터 흐름이 이루어지는 과정이 단방향이라는 것을 알아야한다. 부모 객체는 자식객체에 props 값을 전달하며, props값을 받은 자식객체는 이 부분을 렌더링한다. state라는 자체 값을 포함하여 데이터를 변경해주고 다시 렌더링할 수 있다. 

 

 

  3.1 props

  properties의 줄임말이며 Props는 React에서는 사용자가 컴포넌트에 전달해서 보관한다. 이는 수정되지않고 보존되길 원한다는 말이며 만약 props의 값을 변경하고자 할때에는 컴포넌트 내부가 아닌, 부모 컴포넌트에서 변경이 이루어져야 한다.

 

 

  3.1 State

    React 컴포넌트에서는 상태를 저장할 수 있다. Props는 보관이 목적이기 때문에 값 변경이 불가능 했지만 State에서는 수정이 가능하다. 

 

 

* 이  포스팅은 요소의 정리를 위한 글임으로 두 요소에 관련된 예시는 아래 참고 사이트에 링크 참고해 주세요 ^^ *

 

 

 

 

4. React Hooks  & React 컴포넌트의 LifeCycle의 변화 

   일단 React16.8부터 정식으로 추가된 ReactHook을 알 필요가 있다. 요즘에는 Hook이 기본으로 쓰이기 때문이다. Hook은 우리가 자주쓰던 Class를 쓰지않고 Function에서 state를 사용할 수 있게 만든것이다. 앞에서 React는 컴포넌트들로 이루어져있다고 언급하였다. 하지만 기존에 React에서는 이를 자유롭게 재사용하기가 쉽지 않았다고 한다. 

 

출처 :https://velog.io/@leeeeunz/TIL-28.-React-Component-Lifecycle

 

위의 사진이 기존의 LifeCycle이다.  render, componentDidMount, componentDidUpdate등 여러가지 함수가 생명주기에 맞추어 호출되는 것을 확인할 수 있는데 그림만 봐도 사실 나에겐 복잡해보인다. 따라서 출시된 것이 React Hook이다. 위에서 설명한 state의 경우 setState를 통해서만 값을 바꿔야하는데 setSate와 LifeCyle에 쓰여지는 함수들은 모두 사용하지 않고 hook을 통해서 기능을 제공한다. 

 

 

 - State Hook

   state와 setState로 상태를 관리했다면 이제는 useState를 사용하여 hook을 사용한다. 이러면 값의 변경의대한 집중은 줄어들고 render()의 로직만 집중할 수 있다. 

 

 - Effect Hook

    기존 React life cyle에 해당하는 로직들은 effect hook을 이용한다. 기존의 Life Cyle에서는 API요청, DOM조작등이 들어가는데 render할 때마다 useEffect가 실행되어 Life Cyle의 componentDidMount, componentDidUpdate, componentWillUnmount가 useEffect로 실행되는 것이다. 이는 render가 발생할때 마다 발생되며 inputs를 통해 특정한 상태가 update되었을 때만 effect가 실행되도록 한다. 

 

 

 

 

 

* 이  포스팅은 요소의 정리를 위한 글임으로 hook에 관련된 예시는 아래 참고 사이트에 링크 참고해 주세요 ^^ *

 

---

참고 사이트

https://trustyoo86.github.io/   

 

props & state -> https://trustyoo86.github.io/react/2017/11/18/props-state-react.html

hook -> https://velog.io/@vies00/React-Hooks