React.js

01.React.js 환경설정

React를 사용하기 위해선 아래의 react와 react-dom를 import해줘야 한다.(어려운 방식으로 시작)

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
=> <script src="위 주소"></script> 

 

react = library, interactive하게 만들어주는 원동력

react-dom = library or package, 모든 React Element들이 html body에 들 수 있도록 해준다.

02.React JS로 Element 만들기

01. element 생성 - const span = React.createElemnt("span", {id : "sexy-span",style : {color:"red"},content(내용));

                                                                                                └properties 자리

02. -element 출력 - ReactDOM.render(span,root);

                                                             └span을 root안에 넣어서 화면에 보여줘!

   -const container = React.createElement("div",null, [span,btn]);

                                                                                     

=> React JS는 유저에게 보여질 내용을 컨트롤할 수 있다. Js로 element를 생성하고 react가 그걸 html로 변환

vanilla

<script>

        let counter = 0;

        const button = document.querySelector("#btn");

        const h3 = document.querySelector("h3"); 

        function handleClick() {

            counter = counter +1

            h3.innerText = `Total clicks : ${counter}`

        }

        button.addEventListener("click", handleClick);

    </script>

 

use React JS

<script>

        const root = document.getElementById("root");

        const h3 = React.createElement("h3"//html에 들어갈 tag,

            {id:"title", //property가 포함된 object

            (유효한 event) onMouseEnter:() => console.log("mouse Entered"),}, "Hello" //content);

        const btn = React.createElement("button", {

            onClick: () => console.log("im clicked"),

        }, "Click Me");

        const container = React.createElement("div",null, [span,btn]);

        ReactDOM.render(container,root);

    </script>

03.JSX 

JS를 확장한 문법 js를 HTML처럼 => html문법으로 작성한 언어를 변환해줘야하는데 Babel사용

 

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><!--babel(변환기) -->

    <script type="text/babel">

        const root = document.getElementById("root");

        const Title = () => <h3 id="title" onMouseEnter = {() => console.log("entered here")} >

            Hello I'm a title

            </h3>

        const Button = () =>                     //컴포넌트

        <button style={{color:"red"}}        //컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력                                                              //하는 함수. =>리액트로 만들어진 앱을 이루는 최소한의 단위

        onClick={() => console.log("im clicked")}

        >Click me</button>

        const Container = () =>

        <div>

            <Title /> // 내가 제작한 컴포넌트들은 대문자로 만들고 사용

            <Button/> //소문자면은 HTML코드인지 안다.

        </div>

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

    </script>

function render() {

            ReactDOM.render(<Container />,root); 값이 바뀌면 리랜더링을 해줘야함

        }                                                                  react.js는 오로지 바뀐 것만 생성후 교체해주고 html은 전부 재생성한다.

const [counter, modifier] = React.useState(0); //data와 함수를 줌.([data,f])  리액트에서 data를 저장할때 쓰는 기능

 

04.State

01.setState and state function

 

<script type="text/babel">

        const root = document.getElementById("root");

        function App() { ┌리렌더링 trigger

        const [counter, setCounter] = React.useState(0); //data와 함수를 줌.

        const onClick = () => {

            setCounter(counter+1) //리렌더링을 일으켜줌.   <- 첫번째 방법 - 직접 값 설정해주기 

             └setCounter((current) => current + 1); <- 현제 값이란걸 보장하고 있다.= 두번째방법- 함수 전달하기(safety)

        };

        //useState는 숫자형 data와 modifier함수를 렌더링 해줄 것이고 아래 코드로 리렌더링을 해줌

        // └modifier함수를 이용해 컴포넌트의 state(data), 즉 어플리케이션의 데이터를 바꿀 때 

            컴포넌트는 새로운 값을 가지고 리렌더링이 되는 것이다. = 데이터가 바뀔때마다 컴포넌트를 리렌더링,UI refresh

 

02. Inputs and State 

const [value, modifier] = React.useState(0);

            const onChange = (event) =>{

                console.log(event.target.value) //form을 다루는 방법

            }

<label htmlFor ="minutes">Minutes</label>

            <input

            value = {minutes} input의 value를 연결해준 이유는 외부에서도 수정하기 위해서

            id="minutes"

            placeholder = "Minutes"

            type = "number"

            onChange = {onChange} /> onChange를 없애면 0으로 값이 고정되어 변하지 않는다.

const [flipped, setFlipped] = React.useState(false); boolean을 줘서 조건식처럼 사용도 가능하다/이지선다..?

disabled {flipped === false} 

 

05.Props

일종의 argument라고 보면 된다.

component를 만들어서 사용할때 props를 설정해주고 component에 입력해주면 된다

ex)

const Btn = (props) =>{console.log(props.name)} return (<button>{props.text}</button> 

const App = () => { return (<div> <Btn text = "Save" name ="Joseph" /> </div> 

이런 식으로 Btn에 props를 설정해두고 App에서 Btn을 쓸때 props를 사용하면 편하다 (props)대신 ({name, text})로 할당해놓으면 {props.text}가 아닌 {text}만 적어도 된다.

React.memo = memorize => 기억해놨다가 변하면 리렌더링 되게 해주는 기능

 

 

06.EFFECTS

useEffect = useEffect(function,[]); : 함수를 한번만 실행. 

                    useEffect(fuction,[state]) : state가 변할때만 실행.

                    useEffect( () => {if문 {function}}, [state] ); 식으로도 사용 가능

 

Cleanup - component가 파괴될 때 code를 실행할 수 있다.

 

function Hello() {
  useEffect(function () {
    console.log("hi");
    return function () {    => return을 사용해서 component를 숨기던지 쨋든 파괴할 때 return값을 출력.
      console.log("bye");
    };
  }, []);
  useEffect(() => {
    console.log("hi :)");
    return () => console.log("bye :(");
  }, []);
  return <h1>Hello</h1>;
}