React란?

-사용자 인터페이스를 구축하기 위한 JavaScript *라이브러리 이다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다.

React의 필요성

-웹페이지는 굳이 react안써도, html, css, javascript를 이용해서 만들 수 있다.

하지만, react를 이용하면 동적인 인터페이스를 더 손쉽게 만들 수 있다.

React JS 설치

리액트 JS를 설치하기 위해선 두 개의 JS코드를 import 해야 한다. (react, react-dom)
reactJS는 UI만들수있게해주는 JS라이브러리
react-dom은 모든 React element들을 HTML body에 두는 역할
본래는 아래의 코드를 주로 사용하지만, 기초 연습을 위해 따로 srcipt두는 것 만으로 작업

npx create-react-app [폴더이름] —template typescript
npm i react-router-dom
npm i @types/react-router-dom

VanillaJS 사용

<!DOCTYPE html>
<html>
    <body>
        <h1>0</h1>
        <button id="btn">꾸-욱</button>
    </body>
    <script>
        let count = 0;
        const button = document.getElementById("btn");
        const h1 = document.querySelector("h1");
        function handleClick() {
            console.log("꾸-욱");
            count = count +1;
            h1.innerText = count;
        }
        button.addEventListener("click", handleClick);
    </script>
</html>

ReactJS 사용

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script>
        const root = document.getElementById("root");
        const h1 = React.createElement(
            "h1",
            { id: "big_text", style: { color: "red" }},
            "Hello World"
        );
        
        const btn = React.createElement(
            "button",
            { onClick: () => console.log("꾸-욱") },
            "꾸-욱"
        );
        
        const container = React.createElement(
            "div",
            null,
            [h1, btn]
        );
        
        ReactDOM.render(container, root);
        
    </script>
</html>

ReactDOM.render(span, root); ReactDOM에게render하라고시킴 (h1을 root위치로)
render의 의미:= React element를 사용자에게 보여준다 (랜더링)
root만을 body&가져와서 거기에 ReactDOM한테render하라고시키면 끝.

특징 1. 단방향 데이터 흐름

즉, 단방향 데이터 바인딩

const span = React.createElement("span", {id : “spann”}, “hello Wolrd”); //span의 property (세번째 property까진 보통안씀)
즉, 한번에 span ‘HTML element’만들고동시에 id부여가능
바닐라JS : HTML먼저만들고, 그걸 JS로 가져와서 작업(eventListener 입력)
리액트JS : ReactJS로element를만들고eventLinstener더하는걸도와줌 → 그걸 (ReactJS (정확힌 ReactDOM으로)) HTML 로(여기선body로) 가져다 주는 것 (span → span)
즉, ReactJS는업데이트를 HTML에보여주는역할

결론: reactJS로 html element 작업해주기 편리하다

추가 개념: 더 편한 ReactJS 사용

JSX문법: ReactJS로element만들때 더 편하게 만들어주게 해주는 문법

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");

        const Title = () => (
            <h1 id="big_text"
                style={{ color: "red" }}>
            HelloWorld</h1>
        )
        
        const Btn = () => (
            <button id="btn"
                onClick={ () => console.log("꾸-욱") }
            >
            꾸-욱</button>
        )
        
        const Container = () => (
            <div>
                <Title />
                <Btn />    
            </div>
        )
        
        ReactDOM.render(<Container />, root);
        
    </script>
</html>

브라우저는 JSX문법을이해할수없기때문 ⇒ 한번 변환시켜줘야됨(babel)
밑은 다 바벨한테 변환해 달라고 하는 거(JSX→ReactJS로)

특징 2. JSX

babel전 React코드와 JSX코드의 차이점

< babel 전 React 코드>

React element 생성
' const Button = '같은 상수 형식으로 선언
(예를 들어, React.createElement(”button”, null, "Hello World");

React component 생성
'const Button = () ⇒ ( ) or function Button() { return } ' 같은 함수 형식으로 선언

( 컴포넌트란 쉽게 말해, JSX를 반환하는 함수를 일컫음 )

컴포넌트를 작성할 때 유의 할 점

1. 컴포넌트의 첫 글자는 반드시 대문자 (만약, 소문자로 작성한다면, React와 JSX는 해당 컴포넌트는 HTML 태그( ex) button 태그)라 생각할 수 있음

예시)

h1태그를 랜더링하고있는 컴포넌트 : Title
button태그를 랜더링하고있는컴포넌트 : Button
div태그를 랜더링하고, Title, Button 의코드를담고있는컴포넌트 := Container
JSX ⇒ 어플리케이션을 깔끔하게작은요소들로나눠서 코드를관리할수있도록해주는장점

2. 각 컴포넌트에서 return을 할 땐, 한 element만 return 가능

예시)

function Container() {
	return (
    	<div>
        	<MorningTime />
            <LunchTime />
        </div>
    )
}

특징 3. Component 기반 구조

ReactJS에서의 변수 사용

State

modifier함수를 가지고, state가 바뀌면, 컴포넌트 자체가 재생성돼 = 총 리랜더링이 일어나

하지만, 달라지는건 state값 뿐

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");

        const Title = () => {
            const [ count, setCount ] = React.useState(0);
            const onClick = () =>{
                setCount(count + 1);
            }

            return (
                <div>
                    <h1> { count } </h1>
                    <button onClick={ onClick }>꾸-욱</button>
                </div>
            )
        }
        
        ReactDOM.render(<Title />, root);
        
    </script>
</html>

ReactJS에서의 값 전달

자식→부모로 값을 전달 : return

부모→자식으로 값을 전달 : ?? 의 해답이 바로 props

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        function MorningTime() {
            return (
                <h1>03:00:00</h1>
            )
        }

        function LunchTime() {
            return (
                <h1>02:00:00</h1>
            )
        }
        
        function Container() {
            return (
                <div>
                    <MorningTime />
                    <LunchTime />
                </div>
            )
        }

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

Prop

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
		<script type="text/babel">

        function Time(props) {
            return (
                <h1>{props.time}:00:00</h1>
            )
        }

        function Container() {
            return (
                <div>
                    <Time time={3} />
                    <Time time={2} />
                </div>
            )
        }

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

Props는 일종의 방식: 부모 컴포넌트로내에서 자식 컴포넌트로 데이터를전달하는 방법
부모컴포넌트로부터 전달하는,전달받는 인자를 props 라는 이름쓰자 라는 약속 (properties)
같은 코드를 여러 번 작성안해도 되는 편리함

props 작성할 때의 규칙

부모에서전달할때의 이름과, 받아서쓸때의 이름은 반드시 같은 이름 이여야 한다.

ES6 방식과 PropTypes

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/[email protected]/prop-types.js"></script>
    <script type="text/babel">

        function Time( {time} ) {
            return (
                <h1>{time}:00:00</h1>
            )
        }
        
        Time.propTypes ={
            time: PropTypes.number.isRequired,
        }

        function Container() {
            return (
                <div>
                    <Time time={"asd"} />
                    <Time time={2} />
                </div>
            )
        }

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

Btn.propTypes : 부모로부터 전달받을 때 변수 형식을 검사
propTypes으로 다음과 같은 형식 에러를 발생시킬 수 있다.

특징 4. State 와 Props

Author And Source

이 문제에 관하여(React 기초 연습), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dbstn1325/React-기초-연습

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

React 기초 연습