React: React 시작 (feat. babel, react-dom)
Babel
ES6의 문법을 ES5로 변환해주는 역할
ES6 문법을 아직 지원하지 않는 브라우저의 호환성을 위해 사용
react와 react-dom
react 파일은 컴포넌트를 담당하고,
react-dom 파일은 실제 DOM의 렌더링을 담당한다.
-> 실제 페이지에 jsx형태의 코드를 렌더링 할 때 사용
리액트 15 이후 버전부터 파일이 분리되었다.
component
컴포넌트는 자바스크립트의 클래스, 리액트 컴포넌트 클래스를 상속받아 사용
컴포넌트에서 다른 컴포넌트를 불러와 사용 가능
자바스크립트의 class
- 자바스크립트에서의 클래스는 ES6 부터 도입된 문법
- 기존 prototype 기반의 상속을 보다 명료하게 표현
** 새로운 객체 지향 모델은 아니다 (class기반이 아닌 문법만 가져온 것)
자바스크립트 class의 사용
생성자 메소드가 있다
생성자 내부에서는 메소드만 생성 가능
생성자 내부에서 변수(인스턴스의 프로퍼티) 사용
constructor(변수1, 변수2){
this.변수1 = 변수1;
this.변수2 = 변수2;
}
// 클래스는 오브젝트(객체)를 정의
// 변수에 담긴 오브젝트는 인스턴스(하나의 객체)
클래스는 사용전 먼저 선언해야함
클래스 내부에 static method 생성 가능 (스태틱 메소드는 인스턴스 생성 전 사용 가능)
클래스 상속 가능 (supur 키워드로 부모 클래스 호출 가능)
render()
모든 리액트의 컴포넌트는 render() 메소드를 가지고있다.
-> 컴포넌트가 어떻게 생길지 정의해줌
JSX
자바스크립트 코드에서 html 엘리먼트 정의 가능 (XML-like syntax)
JSX는 xml같은 문법을 native JavaScript로 변환
따옴표로 감싸지 않는다.
괄호는 생략 가능하지만 가독성을 위해 꼭 사용
ES6문법은 아니지만 babel에서 jsx-loader를 통해 변환해줌
JSX 사용 예
class Codelab extends React.Component{
render(){
return(
<div>Codelab</div>
);
}
}
class App extends React.Component{
render(){
return(
<Codelab />
);
}
}
// react-dom에서 JSX형태의 코드를 페이지에 렌더링
// 인자1. 렌더링 할 JSX코드/컴포넌트, 인자2. 렌더링할 페이지의 html엘리먼트
ReactDOM.render(
<App />, document.getElementById('root')
)
JSX의 특징
- Nested Element: 여러 element를 렌더링 시 container element 내부에 작성해야 함
render(){
return(
<>
<h1>Hi</h1>
<h2>Yaeh</h2>
</>
)
- JavaScript Expression: JSX문법 내부에 자바스크립트 사용
-> {}로 wrapping하여 사용 가능
render(){
let text = 'Hi';
return(
<>
<h1>{text}</h1>
<h2>Yaeh</h2>
</>
)
- Inline Style: JSX 내부에 style 설정 시 key가 camelCase인 객체 사용
render(){
let style = {
color: 'aqua',
backgroundColor: 'black'
};
let text = 'Hi';
return(
<div style={style}>
<h1>{text}</h1>
<h2>Yaeh</h2>
</div>
)
- Comments: JSX 내부에 주석 형식은 {\/주석\/}, container element 내부에 작성
render(){
<>
{/* 주석 작성 /*}
</>
)
JavaScipt 변수 선언 방식
scope: 변수 접근 범위 (유효 범위)
1. var: 재선언 가능 / 재할당 가능, 스코프 범위 - 함수
2. let: 재선언 불가 / 재할당 가능, 스코프 범위 - 블록
3. const: 재선언 불가 / 재할당 불가, 스코프 범위 - 블록
** 기본적으로 let 사용, 필요 시 var, const 사용
Author And Source
이 문제에 관하여(React: React 시작 (feat. babel, react-dom)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lumpenop/React-React-시작-feat.-babel-react-dom저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)