[React] Udemy기술 블로그 챌린지 - 한입 크기로 잘라 먹는 리액트(React.js) - Node.js, React.js 기초

Udemy 리액트 강의 

https://www.udemy.com/course/winterlood-react-basic/

 

Node.js ?

😮 자바스크립트 언어는 어디서 어떻게 동작할까?
자바스크립트는 자바스크립트 엔진 위에서 동작한다. 그 엔진은 웹 브라우저에 있다.

브라우저들은 각각 자기들만의 엔진을 사용한다. 그 중 크롬 브라우저가 가진 V8 엔진이 가장 대표적인 자바스크립트 엔진으로 알려져있다.

자바스크립트는 브라우저에 내장된 자바스크립트 엔진을 사용해야해서 웹 브라우저에서만 실행될 수 있었다. 그때 마침 크롬이 자바스크립트를 실행할 때 사용하는 js엔진인 V8 은 C++로 개발되어 브라우저 내부가 아니더라도 어디서든 이 엔진을 사용할 수 있었다.
그리고 브라우저에서 독립가능했던 V8엔진을 사용해서 자바스크립트를 브라우저가 아닌 어디서나 사용할 수 있게 만드는 위대한 프로젝트가 시작되었는데 이 프로젝트 이름이 바로 Node.js 이다.
크롬의 자바스크립트 엔진인 V8엔진을 이용하여 자바스크립트를 브라우저가 아닌 어디에서든 사용할 수 있도록 만들어주는 친구이다.

 

React.js  ?

: 브라우저에서 동작하는 복잡하고 여러가지 기능을 가진 자바스크립트 파일들을 쉽게 만들어 낸 기술이다. 또한 Node.js 기반으로 사용할 수 있는 기술이다.

Node설치 & Mac m1 노드 설치

Node.js

 

[Node.js] Mac 맥(m1) - homebrew, node, npm, nvm 설치 관련

 

Node.js 패키지 생성 및 외부 패키지 사용시 알아야하는 개념

 ⭐ npm (node package manager)
: Node.js 를 사용하면서 다른사람이 만들어 놓은 모듈들을 내려받아 사용할 수 있도록 도와주고 우리가 개발할 프로젝트 관리 시 유용하다.

Package
: 누군가 따로 만들어놓은 Node.js 모듈을 package 라고 한다.

package.json  : dependenceis 라는 필드가 추가됨 우리가 어떤 외부 패키지를 설치했는지, 그 버전이 기록(간단히)

 

React 는 컴포넌트 기반의 UI 라이브러리 이기 때문에, 모든 html요소를 컴포넌트화해서 재사용 할 수 있다.

 

jsx

: 자바스크립트의 변수나 함수같은 값을 html에 쉽게 포함해서 사용할 수 있도록 고안된 문법이다.
  HTML with Javascript : 자바스크립트의 확장문법이자 자바스크립트와 HTML을 혼합해서 사용할 수 있는 표현식

function App() {
  let name = "sky";

  return (
    <div className="App">
      <header className="App-header">
        <h2>안녕 리액트 {name}</h2>
      </header>
    </div>
  );
}

export default App;

 

State(상태)란?

: 컴포넌트가 갖는 테마처럼 계속 값이 바뀔 동적인 데이터이고, 이 상태를 바꾸는 관리는 이걸 가진 컴포넌트가 직접 관리하게 된다.

화면에 표시되는 값이 바뀔때마다 화면을 새로 그리는데 이것을 re-render 라고 한다.

 

Props

: 컴포넌트에 데이터를 전달하는 방법

function App() {
  const number = 5;

  return 
      <div>
        <MyHeader />
        <Counter initialValue={5} />
      </div
  );
}
export default App;

이런식으로 부모컴포넌트인 App컴포넌트에서 자식컴포넌트인 Counter 컴포넌트에게 어떤값을 이름을 붙여서 전달하는 방식을 prop 이라고 부를 수 있는데, 전달되는 데이터를 복수형으로 얘기하면 props 라고 할 수 있다. property의 줄임말이다.

props를 전달할때 까먹거나 어떤 상황에서 의도치않은 특정 props가 undefined로 전달될 것 같을 때, default값 할당이 가능하다.

Counter.defaultProps = {
  initialValue: 0,
};

 

우리가 다시 한번 기억해야 할 점은, 리액트의 컴포넌트는 부모가 내려주는 props가 변경될 때마다 리랜더 된다는 점이다.