REACT / JSX / #1~#2

해버니·2022년 8월 8일
JSXReact
1

ReactJS

목록 보기
1/3
post-thumbnail

리액트는

13년도에 발표
페이스북에 의해 만들어짐

Why React

개발자로서 가장 중요한 자원은 바로 시간이다.

공부할 분야를 정해서 시간을 투자하는 것이기 때문에 앞으로의 성장 가능성이 있는 개발 언어를 정해서 공부하는 것이 중요하다.


신기술을 배울 때 중요한 것

  1. 누가 이 기술을 사용하는지, 그들의 규모가 얼마나 큰지 꼭 살펴봐야 한다.
    그리고 이 기술이 그들에게 얼마나 중요한지도 봐야한다.
    상위 1만 개의 웹 사이트 중 44.76%는 React JS를 사용한다고 한다.
    (넷플릭스에게 react js는 얼마나 중요할까? -> 엄~청 중요하다)

큰 회사에서는 오늘은 React JS를 썼다가 내일은 Angular를 썼다가 할 수 없다.
왜냐하면 이럴 시간이 없기 때문이다.
그래서 안정적이고, 작동하는 것을 선택해야 한다.


2. react JS가 어디서부터 왔는가 생각해보면 **페이스북**에서 왔다. 페이스북이 React JS를 만들었고, 이걸로 페이스북 웹사이트 전부를 다시 만들었다.

3. react JS는 엄청 큰 커뮤니티를 가지고 있다. 왜냐하면 React JS는 Javascript와 매우 가깝기 때문이다. React JS 자체는 작고, 대부분의 경우 React JS는 Javascript이기 때문에, 그리고 React JS를 배우고 작업하는 것은 우리를 더 나은 Javascript 개발자가 되도록 하기 때문에, 그래서 커뮤니티가 아주 거대하다.






Introduction

React JS가 해결해주는 문제를 이해해보기

기술은 도구를 고치기 위해 만들어진다.
그래서 기술이 고치려고 하는 문제를 이해하면 그 기술을 더 잘 이해할 수 있게 된다.
만약 우리가 뭔가를 배우는데, 이것이 어떤 문제를 해결하는지 이해하지 못한다면 해결하려는 문제를 직접 겪어보지 못한다면 그저 암기를 해야 할 것이다.
(바닐라 JS 코드와 React JS 코드를 비교해볼 것이다.)

React를 쓰는 이유?
React JS는 UI를 interactive하게 만들어준다.






Before React

버튼을 몇 번 클릭했는지 세는 어플

<!DOCTYPE html>
<html lang="ko">
<body>
    <span>Total clicks : 0</span>
    <button id="btn">Click me</button>

    <script>
        let counter = 0;
        const button = document.getElementById("btn");
        const span = document.querySelector("span");
        function handleClick(){
            console.log("i have been clicked");
            counter++;
            span.innerText = `Total clicks : ${counter}`;
        }
        button.addEventListener("click", handleClick);
    </script>
</body>
</html>

계속 가져와서 eventlistener를 달고, 함수를 만들고 또 만들면 점점 양이 많아져 혼란스러워질 수도 있다.

그래서 이 코드보다 더 좋은 방식을 보여주려고 한다.

React JS를 설치하기 위해서는 두 개의 Javascript 코드를 import 해야 한다.
react와 react-dom이다.




더 좋은 방식으로 만들 것

<!DOCTYPE html>
<html lang="ko">
<body>
    
</body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script>
    
</script>
</html>

react & react-dom을 import하기



react가 우리 코드에 있는 것이다.






Our First React Element

React JS element 생성하기

React JS의 규칙 중 하나는 HTML을 이 페이지(body(?))에 직접 작성하지 않는다는 것이다.
HTML 코드를 직접 작성하지 않을 것이다.
그 대신, Javascript와 React JS를 이용하여 element를 생성할 것이다.
이건 정말 유용한데 나중에 왜 그런지 알게 될 것이다.



어떻게 body안에 React element를 가져다 둘 수 있을까

React JS -> 어플리케이션이 아주 interactive하도록 만들어주는 library이다.
react-dom -> library 또는 package인데 모든 React element들을 HTML body에 둘 수 있도록 해준다. react element를


<!DOCTYPE html>
<html lang="ko">
<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script>
    const root = document.getElementById("root");
    // span을 페이지에 두어야 한다. -> (body)는 비어 있으니까
    const span = React.createElement("span");
    ReactDOM.render(span, root);
    // 여기 React element를 가지고 HTML로 만들어 배치한다.
</script>
</html>




span이 root안에 생겼다!



argument

createElement에는 우리가 더 작성할 수 있는 argument가 있다.
예를 들어, 두 번째 argument로 둘 수 있는 것은 span의 property들이다.
무엇이 span의 property가 될 수 있을까?
property는 class name이 될 수도 있고 id가 될 수도 있다.


<!DOCTYPE html>
<html lang="ko">
<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script>
    const root = document.getElementById("root");
    const span = React.createElement("span", {id: "cute"});
    ReactDOM.render(span, root);
</script>
</html>

root 안에 span에 id (cute) 부여하기



궁극적으로

React JS에서는 모든 것이 Javascript로써 시작한다.
그 다음에 HTML이 되는 것이다.
이것이 바로 React JS 파워의 핵심이다.
우리는 HTML을 만들고, 찾아서 가져오고 그리고 나서 업데이트하고.. 이런 식으로 하지 않을 것이다.
React JS에게 "업데이트해야 하는 HTML"을 업데이트하라고 할 것이다.
이렇게 하는 유일한 방식은 Javascript에서 시작하고, HTML에서 끝나는 것이다.






Events in React

버튼을 한 번 만들어 볼 것이다!
그래서 버튼에서 일어나는 event를 어떻게 감지하는지도 알아볼 것이다.

<!DOCTYPE html>
<html lang="ko">
<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script>
    const root = document.getElementById("root");
    const h3 = React.createElement("h3", {
        onMouseEnter: () => console.log("mouse enter"),
    }, "Hello I'm a span" );
    const btn = React.createElement("button", {
        onClick: () => console.log("im clicked"),
    }, "Click me");
    const container = React.createElement("div", null, [h3, btn]);
    // h3 & btn 둘 다 render 하고 싶으면? -> array를 두면 된다. 
    ReactDOM.render(container, root);
    //ReactDOM은 container element를 root div 안에 render 할 것이다.
</script>
</html>






JSX (JavaScript XML)

javascript에 XML을 추가한 확장한 문법이다.

위에 있는 createElement를 대체할 수 있는 방법에 대해 알아볼 것이다.
굳이 createElement를 대체하려는 이유는 개발자들에게 좀 더 편리한 도구를 사용하기 위해서이다.
그 편리한 도구가 JSX이다.

기본적으로 React 요소를 만들 수 있게 해주는데 HTML에서 사용한 문법과 흡사한 문법을 사용한다.
생긴게 HTML이랑 비슷해서, JSX로 React 요소를 만드는 게 개발자들 입장에서는 굉장히 편하다.



Babel

코드를 변환해 주는 녀석!이다.

JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔준다.



https://babeljs.io/

코드를 알맞게 바꾸어 준다.



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

//위와 아래는 동일한 기능을 하는 코드이다.
    
const h3 = React.createElement("h3", {
    onMouseEnter: () => console.log("mouse enter"),
}, "Hello I'm a span" );
    





<!DOCTYPE html>
<html lang="ko">
<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script  type="text/babel">
    const root = document.getElementById("root");
    
    const Title = (
        <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
            Hello I'm a span
        </h3>
    );

    const Button = (<button style={{
        backgroudColor: "tomato",
    }} onClick={() => console.log("im clicked")}>
    Click me</button>);

    const container = React.createElement("div", null, [Title, Button]);
    ReactDOM.render(container, root);
</script>
</html>






JSX part Two

컴포넌트의 첫 글자는 반드시 대문자여야 한다.
만약 소문자면 React랑 JSX는 이게 HTML button 태그라고 생갈할 것이기 때문이다.
우리가 직접 만든 요소는 전부 대문자로 시작해야 한다.

Title, Button을 렌더링(?) 하고 싶은데 이걸 Container에 포함시키기 위해서는 Title과 Button을 함수로 만들어줘야 한다.


Title & Button을 포함시키기 위해서 함수로 만들어 줘야 한다.



<!DOCTYPE html>
<html lang="ko">
<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script  type="text/babel">
    const root = document.getElementById("root");
    
    // () => 쓰면 함수로 바뀌게 해주는 것. 이건 arrow function 이라고 부른다.
    const Title = () => (
        <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
            Hello I'm a span
        </h3>
    );

    const Button = () => (
        <button style={{
        backgroudColor: "tomato",
    }} onClick={() => console.log("im clicked")}>
    Click me</button>);

    const Container = () =>
        <div>
        	// Title & Button을 렌더링 
            <Title /> 
            <Button /> 
        </div>
    ReactDOM.render(<Container />, root);
</script>
</html>






profile
해버니
다음 포스트

REACT / state / #3

0개의 댓글