React 기본 강좌 정리 - 1~2

다음 강의 내용을 기반으로 정리하고 있습니다.

강의 동영상 

강의 깃허브

 

JSX

JSX 가 없는 경우 원래는 아래와 같이 써야한다.

바벨은 자바스크립트의 최신 문법과 JSX 를 사용할 수 있게 도와주는 도구다.

const reactElement = React.createElement;
render() {
	reactElement(...);
}

태그안에 함수를 직접 입력할 경우 함수가 매번 생기게된다. 가능한 JSX 안의 함수는 클래스안의 메소드로 분리하는 것이 좋다.

 

프래그먼트

JSX 에서의 렌더의 최상위 컴포넌트는 반드시 하나만 존재해야한다.

일반적으로 <div> ~~ </div> 로 감싸지게 되는데 불필요한 div 태그가 HTML 에 생기므로 불필요한 div 를 원치 않는다면 아래와 같이 빈 태그(<>) 나 프래그먼트(<React.Fragment>) 를사용할 수 있다.

1. <> ~~ </>
2. <React.Fragment> ~~ </React.Fragment>

 

기본 이벤트 핸들러

// onClick, onChange, onSubmit, onLoad, onInput, onFocus, onBlur

 

함수형 setState

setState 는 비동기 동작이다. 그래서 setState 가 여러번 사용될 경우 생각하는데로 동작하지 않을 수도 있다.

예전 State 값으로 새로운 State 를 만들어야하는 경우는 함수형 setState를 쓴다.

this.setState((prevState) => {
	return {
    	myValue: prevState.myValue++;
    }
});

setState 가 비동기 동작인 이유는 setState 를 여러번 호출 할 경우 (부분적으로 state 안의 값을 변경하기 위해), 동기 동작일 때 render 를 매번 새롭게 해줘야한다. 반면 setState 를 비동기 동작으로 하여 리액트가 이러한 변경을 한번에 모아서 처리할 수 있기 때문에 렌더 함수의 호출을 줄일 수 있다.

 

ref

React 가 화면을 컨트롤 할 수 있도록 해야한다. 그러기 위해선 가능한 Document 를 사용하지 않아야한다. 이럴때 ref를 사용한다. 아래와 같이 사용하면 특정 태그를 참조하는 멤버 변수를 만들 수 있다.

this.myInputRef;

// ~~

<input ref={(c) => {this.myInputRef = cl}} />

 

React Hooks

const MyComponent = () => {
	return <div> Hello World </div>
}

함수형 컴포넌트의 작업방식이 익숙해지다 보면 클래스를 작성하는 과정이 불편하다. 그런데 함수형 컴포넌트는 ref 와 state 를 사용할 수 없다. 함수형 컴포넌트에서도 state 와 ref 를 쓰고 싶다. 이때 사용할 수 있는것이 React Hooks 이고 리액트에서도 클래스 기반의 컴포넌트보다 Hooks를 쓰는 것을 권장하고 있다.

const MyComponent = () => {
	const [myValue1, setMyValue1] = React.useState(1);
	const [myValue2, setMyValue2] = React.useState(1);
	const inputRef = React.useRef(null);
	return <div> Hello World </div>
}

React.use 로 시작하는 것들(ex. React.useRef , React.userState ... )이 Hooks다. state 변수를 비구조화 할당을 이용하여 선언하고 사용할 수 있다.

 

Node 와 웹팩

웹팩이 없으면 하나의 자바스크립트 파일에 컴포넌트를 죄다 작성해야한다. 페이스북의 컴포넌트가 2만개 정도되는데 이를 다 적어줄 수 없는 노릇이다. 웹팩은 여러개의 자바스크립트 파일을 하나의 자바스크립트 파일로 만들어준다.

 

* Node != 서버, Node = 자바스크립트 실행기

Node 를 사용하면 pakage.json 이 생긴다.

npm install react
npm install react-dom
npm install -D webpack
npm install -D webpack-cli
npm install -D @babel/core // 최신 문법
npm install -D @babel/preset-env // 환경에 맞게 알아서 바꿔준다
npm install -D @babel/preset-react // JSX 문법
npm install -D @babel/plugin-proposal-class-properties // state 할당 문법
npm install babel-loader // 바벨과 로더를 연결

-D 개발에서만 사용하겠다는 의미. webpack을 설치했다면 다음과 같은 파일을 이용하여 webpack 설정을 다룰 수 있다.

 

webpack.config.js

const paht = require('path'); // node 에서 path 를 쉽게 조작할 수 있도록 도와주는 모듈

module.exports = {
	name: 'myWebPack', // 웹팩 설정 이름
	mode: 'development',
	devtool: 'eval', // production 일 때는 hidden-source-map
	resolve: {
		extensions: ['.js', '.jsx'] // 확장자가 js, jsx entry
	}
    
	// 입력 
	entry: {
		app: ['./file1', 'file2'],
	},
    
	// 입력에 적용할 모듈 설정
	modules: {
		// jsx 나 jsx 파일에 babel-loader 룰을 적용하겠다.
		rules: [{
			test: /\.jsx?/. 
			loader: 'babel-loader',
			options: {
				presets: ['@babel/preset-env', '@babel/preset-react']
				plugins: ['@babel/plugin-proposal-class-properties']
			},
		}]
	}
    
	// 출력 ./dist/app.js
	output: {
		path: path.join(__dirname, 'dist'), // 현재 폴더안에 있는 dist 폴더
		filename: 'app.js'
	},
};

file1.jsx 와 file2.jsx 를 불러와서 ./dist 폴더 아래에 app.js 를 만들어라.

 

Webpack -> modules -> rules -> options -> preset

plugin 들의 모음. preset 에 설정을 줄 수 도 있다.

...
presets : [
	['@babel/preset-env', {
    	targets: {
        	browsers : ['> 5% in KR'] // 한국에서 점유율이 5% 넘는 브라우저만
        }
    }]
]
...

 

Webpack -> plugins

module.exports = {
	...
	entry: { ... },
	modules: { ... },
	plugins: [
		//모든 module 의 rule 안에 debug true 값을 넣어주는 플러그인
		new webpack.LoaderOptionsPlugin({debug:true}), 
	]
	output: { ... },
};

 

Module.exports

바깥 클래스에서도 사용할 수 있게한다.

추후 exports 문법으로 변경된다.

 

'~' 은(는) 내부 또는 외부 명령, ... 배치파일이 아닙니다.

npm 에 해당 명령어가 등록되어있지 않은 경우. 이런 경우 명령어를 등록해주거나 아니라면 package.json 파일 아래에 scripts 안에 해당 명령어 관련 설정을 추가해줘야한다.

 

webpack-dev-server 

프론트 코드를 localhost 에 띄우는 띄워준다.

--hot : 프론트엔드의 코드가 변경되었을 때 변경점을 파악해서 다시 띄워준다.

콘솔창에 나오는 [HMR] 의미 : Hot module reload