1 React
1) 리액트는 무엇인가?
A JavaScript library for building user interfaces
라이브러리: 자주 사용되는 기능들을 정리해 모아 놓은 것
사용자 인터페이스(User interface, UI): 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 입력과 출력을 제어해 주는 것
2) 프레임워크 vs 라이브러리
프레임워크: 프로그램에 흐름에 대한 제어 권한을 프레임워크가 가지고 있음
라이브러리: 개발자가 필요한 부분만 필요할 때마다 사용하는 형태
3) 리액트의 장점
빠른 업데이트 & 렌더링 속도
Component-Based
Meta
활발한 지식공유 & 커뮤니티
React Native 모바일 환경으로의 확장
4) 리액트의 단점
방대한 학습량: Virtual DOM, JSX, Component, State, Props 등
바뀌는 부분에 대한 꾸준한 공부
높은 상태관리 복잡도
2 React 시작하기
1) HTML만으로 간단한 웹사이트 만들기
<html>
<head>
<title>웹사이트 제목</title>
</head>
<body>
<h1>환영합니다</h1>
</body>
</html>2) CSS를 사용하여 웹사이트 스타일링하기
h1 {
color: green;
font-style: italic;
}<!--html 코드에 추가-->
<link rel = "stylesheet" href="styles.css">3) 웹사이트에 React.js 추가하기
<html>
<head>
<title>웹사이트 제목</title>
<link rel = "stylesheet" href="styles.css">
</head>
<body>
<h1>환영합니다</h1>
<div id="root"></div> <!--Virtual DOM의 시작점-->
<!--리액트 가져오기-->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js crossorigin"></script>"
<!--리액트 컴포넌트 가져오기-->
<script src="MyButton.js"></script>
</body>
</html>function MyButton(props){
const [isClicked, setIsClicked] = useState(false);
return React.createElement(
'button',
{ onClick: () => setIsClicked(true)},
isClicked ? 'Clicked' : 'Click here!'
)
}
const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton), domContainer);4) create-react-app
Node.js v14.0.0 이상, npm v6.14.0 이상
npx - execute npm package binaries
npx create-react-app <your-project-name>
# 애플리케이션 실행
npm start3 JSX
1) JSX란
A syntax extension to JavaScript
JavaScript + XML/HTML
// 예제 코드
const element = <h1>Hello, world!</h1>2) JSX의 역할
React의 createElement 함수는 JSX 코드를 JavaScript 코드로 변환
React.createElement()의 결과로 Element가 도출
// JSX 사용 코드
class Hello extends React.component {
render(){
return <div>Hello {this.props.toWhat}</div>;
}
}
ReactDOM.render(
<Hello toWhat="World" />,
document.getElementById('root')
);// JSX 미사용 코드
class Hello extends React.component {
render(){
return React.createElement('div', null, `Hello $(this.props.toWhat}`);
}
}
ReactDOM.render(
React.createElement(Hello, { toWhat: 'World' }, null),
document.getElementById('root')
);3) JSX의 장점
간결한 코드
가독성 향상
버그를 발견하기 쉬움
Injection Attacks 방어 > 보안성 강화
4) JSX 사용법
JavaScript 코드 + XML/HTML
JavaScript 코드를 사용하고 싶다면 중괄호 사용
태그에 속성에 값을 넣고 싶다면 큰따옴표 사이에 문자열을 넣거나 중괄호 사이에 자바스크립트 코드를 넣음
(심화) Redux 시작하기
0. Introduction
JavaScript application들의 State(상태)를 관리하는 방법
Redux와 React는 별개이며, React에 의존적이지 않고 Angular, Vue.js, Vanilla Javascript 등에 사용 가능
1. Redux의 3가지 원칙
1) Single source of truth
동일한 데이터는 항상 같은 곳에서 가지고 온다.
즉, store 라는 하나뿐인 데이터 공간이 있다는 의미이다.
2) State is read-only
리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다.
리덕스에서도 action 이라는 객체를 통해서만 상태를 변경할 수 있다.
3) Changes are made with pure functions
변경은 순수 함수로만 가능하다.
리듀서와 연관되는 개념이다.
Store(스토어) – Action(액션) – Reducer(리듀서)
2. Project Setup
npx create-react-app vanilla-redux
clean up: index.css, logo, serviceWorker, test 등은 필요하지 않기 때문에 삭제
