WEB/React

[영화 웹] #2. THE BASICS OF REACT

Harimad 2022. 1. 26. 15:08

#2.1 Before React

JS의 작동 방식
1. html 태그를 만든다
2. js에서 html 태그를 가져온다
3. 가져온 태그에 사용자 함수를 담은이벤트 리스너를 단다.
4. 이벤트리스너가 작동하면 html 태그 변수값(data)을 Update를 시킨다
이벤트리스너, 함수가 많아지면 결국 작성자는 혼란스러워 진다.
그래서 React를 쓴다.
 
<body>
<span>Total Clicks: 0</span>
<button id="btn">Click Me</button>
<script>
    let counter = 0;
    const button = document.querySelector('#btn');
    const span = document.querySelector('span');
    function handleClick() {
        counter += 1;
        span.innerText = `Total Clicks: ${counter}`;
    }
    button.addEventListener('click', handleClick);
</script>
</body>

 

- ReactJS 준비방법

React CDN을 연결한다

<!DOCTYPE html>
<html>
<body>
	<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>
	<script>

	</script>
</body>
</html>

 

 

#2.2 Our First React Element

React 작동순서 : JS부터 시작함 -> HTML에 만들어진 태그를 전해준다.
    - ReactJS는 유저에게 보여줄 내용을 Control 할 수 있다 - 핵심!
 
※ 정리
Old style - HTML만들고, 찾아서 가져오고, 업데이트 하는 방식을 쓰지 않음
React style - JS로 element생성(HTML Tag 선택, event등록) -> HTML로 번역 (Powerful)
 
(아래 코드는 작동방식을 설명하기위해서 쓴거지 추후에 계속 쓰진않음.)
<body>
<div id="root"></div>
<!-- interactive UI -->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!-- react-dom은 리액트요소를 HTML에 붙여줌 -->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
    const root = document.querySelector('#root');

    const span = React.createElement(
        'span',
        { id: 'sexy-span', style: { color: 'red' } },  // Props(propertys) Object 라고 함
        `hello I'm a span`);
    ReactDOM.render(span, root); //Show it to the Users
</script>
</body>
 

 

#2.3 Events in React

createElement 함수의 2번째 매개변수에 Props object(id, class, event ...)를 넣는다.

이건 구식이고 신식인 JSX를 쓸 것이다.

<script>
const root = document.querySelector('#root');

const span = React.createElement(
    'span',
    {
        id: 'title',   //2번째: Property
        onMouseEnter: () => console.log('mouse enter'),
    },
    `hello I'm a span`);

const btn = React.createElement(
    'button',
    {
        onClick: () => console.log(`I'm clicked`),
        style: {
            background: 'tomato',
            fontSize: '30px'
        }
    },
    'Click me');
//div에 span,btn 담기 // 2개의 component를 담은 component생성
const container = React.createElement('div', null, [span, btn]);

ReactDOM.render(container, root);
</script>

 

#2.5 JSX

자바스크립트를 확장한 문법이다.
보통의 HTML과 비슷하다. 그러나 property(id,class,event...)를 HTML 태그의 속성처럼 적으면 된다.

<body>
<div id="root"></div>
<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>
<!-- babel 가져옴 + script:type -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- type을 바꿔줘야함 -->
<script type="text/babel">
    const root = document.querySelector('#root');

    //JSX
    const Title = (
        <h3 id="title" onMouseEnter={() => console.log('mouse enter')}>
            Hello I'm a title
        </h3>);
    //이대로 쓰면 오류발생함 : Uncaught SyntaxError: Unexpected token '<'
    //브라우저가 JSX를 이해할 수 있게 뭔가 설치해줘야함(babel)

    const Button = (
        <button sytle={{ background: 'tomato', }} onClick={() => console.log(`I'm clicked!`)}>
            Click me
        </button>);

    const container = React.createElement('div', null, [Title, Button]);

    ReactDOM.render(container, root);
</script>
</body>

https://ko.reactjs.org/docs/jsx-in-depth.html

 

JSX 이해하기 – React

A JavaScript library for building user interfaces

ko.reactjs.org

 

 

#2.6 JSX part Two

컴포넌트(Title, Button)들을 함수로 만든다.

Container 컴포넌트에 위의 컴포넌트를 대문자로 시작하는 Tag를 넣어준다.

소문자를 넣으면 HTML Tag로 인식하니까 주의해야 한다.

<script type="text/babel">
const root = document.querySelector('#root');

//JSX
function Title() {
    return (
        <h3 id="title" onMouseEnter={() => console.log('mouse enter')}>
            Hello I'm a title
        </h3>)
};

const Button = () => {
    return (
        <button sytle={{ background: 'tomato', }} onClick={() => console.log(`I'm clicked!`)}>
            Click me
        </button>)
};
//구식
// const container = React.createElement('div', null, [Title, Button]);
//신식: JSX
const Container = (
    <div>
        <button>Hello</button>
        <Title />
        <Button />
    </div>
);
//Title말고 소문자 title을 해버리면 HTML태그로 인식함.
//직접 만든 요소는 전부 대문자로 시작해야 된다.

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

 

저작자표시 비영리 변경금지 (새창열림)