한입크기로 잘라먹는 리액트 - Node.js와 React

유데미 기술블로그 챌린지를 통해 한입크기로 잘라먹는 리액트 강의를 수강하며 개인적으로 기존에 애매하게 알고 있거나 헷갈렸던 부분을 강의를 통해서, 또 추가적인 참고자료를 통해서 이해한 것 위주로 정리하였습니다.

이정환 멘토님 한입크기로 잘라먹는 리액트 강의 바로가기↗️

Node.js

Node.js의 탄생과정

자바스크립트 코드는 브라우저 내장 자바스크립트 엔진을 이용하여 실행되므로 웹브라우저에서만 실행가능했으나 C++로 개발되어 브라우저 외의 환경에서도 작동가능한 크롬의 V8 엔진을 사용하여 브라우저 뿐만 아닌 다른 환경에서도 자바스크립트를 사용할 수 있게 되었는데 이것이 Node.js 이다.

node.js

• 크롬 v8 엔진으로 만들어짐
• 자바스크립트의 실행환경 (자바스크립트 런타임)

리액트와의 관계

• 리액트는 브라우저에서 동작하는 복잡하고 여러가지 기능을 가진 JS 파일들을 쉽게 만들어내는 기술로서 노드 기반으로 돌아간다.(더 정확히 말하면, 바벨, 웹팩 등의 리액트 개발환경 구성에 필수적인 모듈을 사용하기 위해서는 노드가 필요하다.)
• 리액트로 만든 자바스크립트 파일들은 복잡하면서도 좋은 기능들을 포함하고 있어 서버에서 응답받은 파일들을 웹브라우저에 띄워보면 고전적인 웹사이트가 아닌 마치 하나의 프로그램처럼 돌아간다 → 리액트 웹 어플리케이션

CommonJS 모듈 시스템

node.js의 기본 모듈 시스템. 모듈 단위로 데이터를 내보내고 필요한 곳에 불러와서 사용할 수 있다.

// example.js
const func1 = () => {};
const func2 = () => {};

// 모듈 내보내기
module.exports = {
  moduleName: "example module",
  func1: func1,
  func2: func2
}

// index.js
const example = require("./example.js") // 모듈 불러오기

console.log(example.func1());
console.log(example.func2());

외부 패키지 모듈

package.json

"dependencies": {
	"randomColor: "^0.6.2". // ^ 표시의 의미: 0.6.2 버전 이상만 설치됨. npm install 할때 패키지의 버전을 명시하지 않을시 0.6.2 이상의 버전을 설치한다는 의미
}

package-lock.json

설치된 외부 패키지들이 정확히 몇 버전으로 설치되었는지 기록되어있다.
외부 패키지를 설치한 경우 require() 메소드 안에 경로를 적는 것이 아니라 해당 패키지 이름을 써주면 된다.

// node_modules/randomcolor 

const randomColor= require('randomcolor'); // node_modules 하위에 있는 패키지 폴더명. 즉, 패키지 이름을 바로 써주면 된다

React가 필요한 이유

1. 컴포넌트 기반의 UI 라이브러리

페이지마다 공통으로 쓰이는 부분이 있다. 해당 부분에 수정사항이 생기면 해당 부분이 쓰인 모든 페이지를 다 수정해야 한다.

산탄총 수술(Shotgun surgery)
중복 코드의 변경 사항으로 인해 중복 코드가 포함된 모든 페이지를 일일이 수정해야 하는 상황을 나타내는 용어. 샷건은 한번 쏘면 여러발이 발사되어 여러 사람이 맞을 수 있다. 이처럼 샷건 한번 발사에 여러 사람이 맞아 수술해야하듯 하나의 문제가 여러개의 파일을 동시에 수정하게 만드는 상황을 의미한다.

이런 상황을 해결하는 방법으로 중복되는 요소를 컴포넌트화해서 페이지에서 컴포넌트를 불러와서 사용하는 방식을 사용하면 페이지에서 직접 일일이 수정할 필요 없이 해당 컴포넌트만 수정하면 된다.

리액트는 컴포넌트 기반의 UI 라이브러리로서 Shotgun surgery와 같은 상황을 겪지 않으면서 개발이 가능하게 한다.

2. 선언형 프로그래밍

리액트는 선언형 프로그래밍 언어이다.

3. Virtual DOM

페이지 내에서 어떤 이벤트가 발생해서 DOM 업데이트가 필요한 상황이라고 가정해보자. 리액트는 바로 DOM 업데이트를 하지 않고 Virtual DOM에 미리 업데이트를 시킨다. 그리고 실제 돔과 비교하면서 다시 렌더링 해야되는 부분만 렌더한다. 모든 페이지가 아닌 업데이트 필요한 부분만 렌더 시킴으로서 성능 측면에서 효율적이다.

Creact React App

npx
설치되어있지 않은 패키지를 딱 한번만 사용하고 싶을때 사용

• npm start를 치면 내 컴퓨터가 로컬 웹서버가 되는 것이다.

  크롬 브라우저가 내 컴퓨터주소(로컬서버주소)로 요청을 날림 → 로컬 서버(내컴퓨터)에서 리액트앱 페이지를 반환함

• 리액트는 node.js 기반의 웹서버 위에서 동작한다.

리액트 앱이 실행되는 과정

• index.js 실행
• public/index.html 에서 div#root 하위에 app.js가 리턴하는 값들(jsx)이 들어감

  // index.js
  ReactDOM.render(
  	<React.StrictMode>
  		<App />
  	<React.StrictMode>,
  document.getElementById('root')
  );

• react는 ES module 시스템을 사용

// App.js
export default App;

// index.js
import App from './App';

JSX
Javascript syntax extension
자바스크립트 확장문법

defaultProps

defaultProps 설정하는법
부모 컴포넌트에서 props를 전달받지 못했을때 props 값의 디폴트값을 설정해서 에러를 방지할수있다.

const Counter = ({initialValue}) => {
	//...
	
	return (
	 //...
	)
}

Counter.defaultProps = {
	initialValue = 5
}

export default Counter;

리액트의 Re-render

• 해당 컴포넌트가 가진 state가 변경될때마다 리렌더
• 부모로부터 받는 props가 바뀔때마다 리렌더
• 부모 컴포넌트가 리렌더되면 자식 컴포넌트도 리렌더
  • 컴포넌트를 prop으로 전달할 수 있다

    const Container = ({children}) => {
        return (
            <div style={{margin:20}></div>
        )
    }

   const App = () => {
       return (
         // h1 요소와 p 요소가 children prop으로 Container 컴포넌트에 전달된다.
               <Container>
                   <h1>Title</h1>
                   <p>Content</p>
               </Container>
       )
   }

---

<참고자료>
https://joonfluence.tistory.com/m/561