React JS

React JS - 01

2023. 8. 10. 18:39ㆍReact JS

SMALL

react 에 대한 공부를 본격적으로 시작하기 전에 js 문법을 이용한 react js 강의가 있어서

js 복기 차원에서 공부를 시작했다.

강의를 듣고 작성한 코드를 정리하는 수준으로 글을 작성할 예정이다.

강의 내용을 정리하고 작성한 코드를 기록하는 정도로....

제발 듣고 까먹지 좀 말자는 차원에서 작성해보는 글이기에... 글쓰면서 다시 한 번 복습해본다.

1. 기존의 js

- <script></script> 태그를 이용하여 js 작성.

- 'getElementById' 를 이용하여 <body> 태그에 있는 요소들을 id 이름을 기준으로 가져올 수 있음.

- 'querySelector' 를 이용하여 태그 이름을 통해 해당 태그의 요소를 가져올 수 있음.

- 'addEventListener' 를 이용하여 버튼을 누를 때 [handleClick] 함수를 실행할 수 있도록 함.

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </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>
    const span = React.createElement("span", {id: "sexy-span", style: {color: "red"}}, "Hello I'm a span!!");  
    const root = document.getElementById("root");
    ReactDOM.render(span, root);

    //javascript 에서 element 를 만들어내고
    // react js 가 element들을 html 과 연결해주는 역할을 수행함
    
</script>
</html>

2. react js 를 이용하여 render 하는 방법

- 태그 요소들을 js 에서 생성 가능함

- [ const 이름 = React.createElement ("태그이름", {id, class, style, function 등등}, "innerText 에 들어갈 내용"} ]

- ReactDOM.render (js 에서 생성한 태그 변수 이름, 넣은 body 태그의 요소 id);

- "https://unpkg.com/react@17.0.2/umd/react.production.min.js"

- "https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </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>
    const span = React.createElement("span", {id: "sexy-span", style: {color: "red"}}, "Hello I'm a span!!");  
    const root = document.getElementById("root");
    ReactDOM.render(span, root);

    //javascript 에서 element 를 만들어내고
    // react js 가 element들을 html 과 연결해주는 역할을 수행함
    
</script>
</html>

3. function 정의하는 방법

- createElement 를 이용해 function 정의 가능

- [ React.createElement("태그 이름", {(on+이벤트이름): () => {실행 동작}}, "innerText 내용"); ]

- 한 태그에 여러 element 들을 넣고 싶으면 <div> 태그를 새로 만들어서 여러 element들을 넣기 ex) [btn, h3];

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </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>
    const h3 = React.createElement("h3", {onMouseEnter: () => console.log("mouse Enter!"),}, "H3!");  
    const root = document.getElementById("root");
    const btn = React.createElement("button", {onClick: () => console.log("im click!"),}, "click me");
    const container = React.createElement("div", null, [h3, btn]);
    ReactDOM.render(container, root);

    // createElement 를 통해 function 정의 가능  
</script>
</html>

4. 쉽게 실제 개발자들이 많이 쓰는 방식으로 element 만들고 나타내기

- 실제 개발자들이 많이 사용하는 방식은 아래와 같은 방식으로 기존의 html 코드 작성법을 그래도 사용하는 것임.

- [ const 변수 = <태그 id="아이디" eventName = {()=> {실행할 코드}}>innerText</태그> ]

- 대신 "https://unpkg.com/@babel/standalone/babel.min.js" 를 추가해줘야 함.

: html 문법으로 작성한 코드를 위의 React.createElement 형식의 코드로 변경해주는 역할을 함.

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    const Title = <h3 id="title" onMouseEnter={()=> console.log("title")}>Hello I'm title!</h3>
    const btn = <button id="btn" onClick={() => console.log("I'm click")}>Click me</button>
    const root = document.getElementById("root");
    const container = React.createElement("div", null, [Title, btn]);
    ReactDOM.render(container, root);

    // element 생성할 때 ReactDOM.createElement 를 사용하지 않고
    // <tag>text</tag> 형식으로 생성 가능함   
</script>
</html>

5. render 하는 방식 또한 html 방식으로 작성

- 이전에 생성했던 태그 요소들을 함수로 전환함.

- 같은 방식으로 태그 요소를 생성하고 나타낼 요소들을 새로운 태그 안에 작성.

- ReactDOM.render (<담은 태그이름 />, 넣을 태그이름)

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    const Title = () => (<h3 id="title" onMouseEnter={()=> console.log("title")}>Hello I'm title!</h3>);
    const Btn = () => (<button id="btn" onClick={() => console.log("I'm click")}>Click me</button>);
    const root = document.getElementById("root");
    const Container = () => (<div><Title /> <Btn /> </div>);
    ReactDOM.render(<Container />, root);

    // Container 요소에 Title, Btn 을 넣어서 render 하기 위해 각각 함수로 변환
    // 함수로 변환한 후 HTML 태그로 사용해서 rendering 함
</script>
</html>

일단 여기까지가 ReatJS 의 기본개념이다.

앞으로 꾸준히 작성해보도록 하겠슴다. 강의 끝까지 작성할 수 있도록...

LIST

'React JS' 카테고리의 다른 글

React - css 속성 \| background 에 이미지 넣기 (0)	2024.01.06
React JS - 05 (0)	2023.08.26
React JS - 04 (0)	2023.08.22
React JS - 03 (0)	2023.08.18
React JS - 02 (0)	2023.08.15

WORLDSILVER_studyStory