#2 [2021 UPDATE] THE BASICS OF REACT - nomadCoder

https://nomadcoders.co/react-for-beginners/lectures/3258

All Courses – 노마드 코더 Nomad Coders

 

#2 [2021 UPDATE] THE BASICS OF REACT

#2.2 Our First React Element

React.js: 어플리케이션이 아주 인터랙티브(interactive) 하도록 만들어주는 library, Engine과 같다.

React-dom: library 또는 package. 모든 react element들을 HTML body에 둘 수 있도록 해줌

ReactDOM.render(): render의 의미는 react element를 가지고 HTML로 만들어 배치한다는 것.
즉, 사용자에게 보여준다는 의미

 

React는 JS -> HTML 순서

JS가 element를 생성하고 React JS가 그것을 HTML로 번역하는 것.

React JS는 업데이트를 해야하는 HTML을 업데이트 할 수 있음

 

#2.3 Events in React

 

#2.4 Recap

 

#2.5 JSX

JSX: JavaScript를 확장한 문법.

기본적으로 우리가 여기서 한 것처럼 React 요소를 만들 수 있게 해주는데, 우리가 HTML에서 사용한 문법과 흡사한 문법 사용함

https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

 

Babel: JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 변환

 

#2.6 JSX part Two

arrow function = () => (

: function이랑 return문 이미 포함하고 있음

 

function () {

    return ();

}

const Button = () => ();

// same

function Button () {
return ();
}

const Container = () => (
<div>
<Button />
</div>
);

ReactDOM.render(<Container />, root);

 

div에 const 넣기 위해서

 

1. const를 함수로 만들어 줘야함. (const  Button = () => ();)

2. HTML 태그처럼 만들어서 넣어줌. (<Button />

3. 컴포넌트의 첫 글자는 반드시 대문자여야 함 (직접 만든 요소는 전부 대문자로 적어야 함)

 

컴포넌트를 다른 컴포넌트 안에 넣었음