의미
Javascript 라이브러리
페이스북에서 유저가 사용하기 쉽게 만든 JSX라는 문법을 이용해 작성한 걸 CRA이 js로 해석해서 컴퓨터에 알려주는 것
CRA (Create-React-App)
React를 배우기 편한 환경으로 한장짜리 react 페이지를 만들기에 가장 좋은 방법이다. 가장 최신의 자바스크립트 개발환경을 제공해주어 개발의 생산성을 높여준다. 백엔드 로직이나 데이터베이스가 전혀 포함되어 있지 않으므로 어떤 백엔드와도 연결 가능하다. 바벨과 웹팩을 사용하고 있다.
바벨 (Babel)
javascript의 트랜스파일러(transpiler)로 ES6로 작성한 JS를 ES6를 지원하지 않는 주요 브라우저에서 잘 동작하도록 해주는 도구
트랜스파일러 : 최신 버전의 JS 문법을 이전 버전 JS문법으로 바꾸어 주는 도구로 구형 브라우저에서도 잘 동작하도록 변환해줄 수 있음 대표적으로 바벨을 들 수 있음
웹팩 (Webpack)
바벨과 같이 지원되지 않는 기능을 잘 동작해주는 번역기라고 할 수 있지만 바벨보다 번역할 수 있는 기능이 더 많다.
JSX
javascript의 확장버전 : HTML과 비슷하게 생겼고 js 파일 내에서 작성 가능
JSX element
HTML문법을 Javascript코드 내부에 쓰면 바로 JSX!
JSX attribute(속성)
태그에 속성을 주고 싶을 때는 항상 "" 쌍따옴표로 감싸야함
HTML의 attribute와 다르므로 리액트 공식문서 참조
self-closing tag
<input>과 같이 하나의 태그가 요소인 경우 <input />으로 끝내줘야 함
Nested JSX
- 소괄호로 감싸기
- 항상 하나의 태그로 시작
Rendering
HTML 요소 또는 React 요소가 눈에 보여지게 하는 것이 렌더링
Component와 Props
Component
의미 : 재사용 가능한 UI단위
함수와 같이 input을 받아 return할 수 있음. React에서 input은 props이고 return은 return.
Component만들기
함수(functional)로 구현
function 함수이름(props){
return <필요한 태그>내용, {props.컴포넌트에 줄 값}</필요한 태그>;
}Class로 구현
class 이름 extends react.Component {
render() {
return <필요한 태그>내용, {this.props.컴포넌트에 줄 값}</필요한 태그>;
}
}
Component 사용
State
컴포넌트의 상태값
props는 컴포넌트를 사용하는 부모 쪽에서 전달해야만 사용할 수 있으나 state는 컴포넌트 내에서 정의하고 사용
