[NomadCoders]ReactJS로 영화 웹 서비스 만들기 - The Basics Of React
THE BASICS OF REACT
2.0 Introduction ~ 2.1 Before React
-
Vanilla JS 보다 React.js의 UI 가 훨씬 더 interactive 하다
-
ex) Vanilla JS에서 action을 취하려면?
- HTML에서 < span >, < btn > 등 필요한 tag 생성
- JS 에서 (getID, querySelector, .. ) 생성한 HTML의 tag를 가져와서
- eventHandler를 달아서 action을 취한다
-
React 는 HTML script에 다음 코드를 삽입하여 설치할 수 있다. (지금은 쌩기초부터. 나중에 npm 을 이용해 설치할 것)
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
2.2 Our First React Element
-
react js로 element를 추천하지 않는 방법으로 만들어보고, 추천하는 방법과 비교할 예정
-
React JS와 Vanilla JS는 작동 방식이 다르다
- Vanilla JS
- HTML 을 먼저 만들고
- 그걸 JS로 가져온다.
- 수정이 필요하다면 HTML을 수정한다.
- React JS
- 모든 것을 JS로 만들면
- 그것이 HTML이 된다. (즉, React는 HTML을 들락날락 할 필요가 없다는 장점이 있음)
- Vanilla JS
- React JS는 UI를 interactive 하게 만들어주는 library
- React-dom 은 모든 react element를 html body에 두게 만듦
2.3 Events in React
- React에서
- button을 만들고
- event를 감지해보자
- Vanilla JS에서는 id를 통해 buttong을 구분했음
- React에서는 그럴 필요가 없다는 것을 느껴보자
const btn = React.createElement(
"button",
{
onClick: () => console.log("im clicked"),
},
"click me"
-
React.createElement(type, props, …children)
- type: html tag 종류
- props: 적용될 property를 object 형태로 넘겨줌. 없으면 null
- children: React nodes, elements, strings, … 여러가지가 될 수 있음
결론
- JS에서
- btn을 만들고
- property에 event listener를 등록할 수 있다!
2.5 JSX
-
2.4는 Recap입니다
-
createElement를 대체할 수 있는 방법 -> JSX
const Title = React.createElement(
"h3",
{
onMouseEnter: () => console.log("mouse enter"),
},
"Hello, I'm a title"
);
- createElement로 react element를 생성한 경우
- 필요한 요소를 기억하면서 생성해야하는 것이 조금 불편함
const Title = (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello, I'm a title
</h3>
);
- JSX로 react element를 생성한 경우
- html과 유사하게 생겼다 (가독성 ⬆)
- browser는 jsx를 이해하지 못하기 때문에 변환 작업이 필요함.
- babel을 이용하여 변환 (babel 말고도 다양한 방법 존재)
- html과 혼용되지 않게 반드시 대문자로 시작
2.6 JSX part Two
- 목표: createElement 대신 JSX를 써보자!
const container = React.createElement("div", null, [Title, Button]);
- 이 코드와 같은 기능을 JSX로 작성해보자
- 이때, Title 과 Button은 jsx 변수 이다.
-
Title과 Button의 함수화
- jsx 변수를 다음과 같이 곧바로 쓴다면?
const Container = <div>Title Button</div>;
=> Title, Button을 JSX가 아니라, 그냥 div 안에 있는 text로 인식해버린다.
=> 따라서 Title, Button을 함수화(Component 화) 해야한다.
function Title() { return ( <h3 id="title" onMouseEnter={() => console.log("mouse enter")}> Hello, I'm a title </h3> ); }
-
직접 만든 Component는 반드시 대문자로 시작
- 소문자로 하면 html tag 와 이름이 같은 경우, html로 인식함
const Container = ( <div> <Title /> <Button /> </div> ); ReactDOM.render(Container, root);
-
container 또한 함수화시킨다
const Container = () => ( <div> <Title /> <Button /> </div> ); ReactDOM.render(<Container />, root);