동아리 프론트 스터디로 리액트도 공부하려고 한 입 크기로 잘라먹는 리액트 강의도 듣기 시작했담 ! node.js는 공부하는 건 처음이라서 신기한 부분이 되게 많았는데, 리액트만 공부했을 때 그냥 엉~ 하고 넘어갔던 부분도 하나하나 알고 지나가니까 재밌었다. 이번에야말로... 리액트 잘 써볼게요 ... 맨날 공부만 하고 써먹질 않아서 실력이 안 느는 느낌 ㅠ.ㅠ
Node.js를 하는 이유
자바스크립트 -> 브라우저 내장 자바스크립트 엔진을 이용해 실행됨 ( 브라우저마다 엔진이 다름, 크롬의 v8 등 )
js를 브라우저에서만 사용하지 않고, 밖에서 사용할 수 있도록 v8 엔진( c++로 쓰임 )을 빼냄 -> node.js
즉 Node.js는 JavaScript의 실행 환경임 + React의 근간
Node.js 사용하기
node.js LTS 버전 설치 -> node -v 로 버전 확인
npm은 node 설치 시 자동으로 설치됨 ( 패키지 매니저 ) -> npm -v 로 버전 확인 가능
Node 모듈과 패키지
모듈 = 어떤 기능을 담당하는 각각의 파일 ...
node.js 모듈을 다른 파일에서 사용하도록 내보내기는 exports 키워드로 진행할 수 있음
// node.js는 객체 단위로 모듈 내보내기 진행됨
module.exports = {
moduleName: "calc module",
add: add,
sub: sub,
};이후 다른 파일에서 node 내장 함수인 require 함수를 사용해서 불러올 수 있음
const calc = require("./calc");
console.log(calc);
console.log(calc.add(1,2));
console.log(calc.add(4,5));
console.log(calc.sub(10,2));CommonJS
require, exports 같은 기능 등을 포함하는 모듈 시스템
비슷하게... ES Module도 존재
패키지 만들기
root 폴더 = 패키지 파일들을 담아두는 폴더
패키지는 초기 설정이 필요함 !
root 폴더에서 npm init 명령어 실행
패키지 명, author 등 정보 입력 -> package.json 생성됨
{
"name": "pacakge-example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js"
},
"author": "isdiscodead",
"license": "ISC"
}-> main의 경우 처음 실행될 js 파일을 뜻하고 scripts는 자주 실행되는 명령어 등을 정의해두는 것
-> npm start 명령어로 이 패키지 실행 가능
외부 node package 사용하기
https://www.npmjs.com/ 에서 다양한 패키지 확인 가능
randomcolor 패키지 -> 랜덤 컬러 코드 줌
npm i randomcolor
-
package.json의 dependancies에서 설치된 외부 패키지의 정보를 확인할 수 있음. 버전 앞의 ^는 ~버전 이상을 뜻함 -
node_modules폴더에는 실제 패키지 파일이 보관됨 -
package-lock.json에서는 정확한 외부 패키지 버전이 기록됨
리액트를 사용하는 이유
- React는 컴포넌트 기반의 UI 라이브러리이므로 코드 재사용성이 높음
- 선언형 프로그래밍 가능
- Virtual DOM을 사용해 높은 성능 유지
React app을 만드는 방법
Webpack -> 다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리
Babel -> JSX 등의 쉽고 직관적인 자바스크립트 문법을 사용할 수 있도록 해주는 라이브러리
-> create react app으로 리액트 boiler plate 패키지 사용
npx create-react-app reactExam1
npm startJSX
Javascript + xml로 컴포넌트 생성 시 유용하게 사용됨
jsx의 표현식은 반드시 하나의 부모를 가져야 하므로 최상위 태그로 가장 바깥을 감싸줘야 한다 !!
만약에 묶고 싶지 않다면 아래처럼 React.fragment 사용
<React.Fragment>
<MyHeader />
<header className="App-header">
<h2>안녕 리액트 {name}</h2>
</header>
</React.Fragment>jsx는 html 태그 안에 {}로 javascript 값을 사용할 수 있음 ( 숫자나 문자열 수식만 가능 )
State
리액트의 가장 중요한 개념 -> 컴포넌트가 가지고 관리하는 동적인 값으로 값과 상태 변화 함수를 가짐
useState 메서드를 import해서 상태 관리 가능
const [count, setCount] = useState(0);컴포넌트는 자신이 가진 State가 변화하면, 화면을 다시 그려 rerender함 ( 화면을 새로 그림 )
✔ 컴포넌트 하나에 여러 개의 스테이트가 존재해도 ok
Props
컴포넌트에 데이터를 전달하기 위한 기본적이고 효율적인 방법
상위 컴포넌트에서 값을 보내주면 매개변수를 통해 받아올 수 있음
defaultProps로 전달 받지 못한 props의 기본 값 설정 가능 !!
정적인 데이터 뿐만 아니라 동적인 데이터도 전달 가능, 즉 부모에게서 받아오는 props 변경 시에도 리렌더링이 일어남
컴포넌트 자체도 props로 전달 가능함 !!
