[React] State

 

#03 State

 

Rendering

컴포넌트, 엘리먼트가 처음으로 화면에 그려지는 것 

 

Re-rendering 

컴포넌트가 상태나 속성 변화로 다시 그려지는 것 

 

 

< Vanilla Js , React Js 업데이트 방식 >

 

Vanilla Js

- 클릭 시 요소들이 업데이트되는 걸 바로 보여 준다

- 직접 DOM 조작

 

React Js

- 가상 DOM 사용 (최소한의 돔 조작)

  가상 DOM과 비교하여 변경된 부분만 찾는다  (Diffing)

  변경된 부분만 실제 DOM에 적용 (Reconciliation)

→ UI에 변경된 부분만 업데이트 !

 

 

• UnderStading Part 1 

   const root = document.getElementById("root");
        let counter = 0;
        function countUp(){
            counter = counter + 1;
            render();
        }
        
        function render(){
            ReactDOM.render(<Container/>,root);
        }

        const Container = () => (
            <div> 
            <h3>Total Clicks: {counter}</h3>
            <button onClick = {countUp}>Click me</button>
            </div>
        );

        render();

 

➣ 렌더링 계속 반복하는 코드

 

 

• UnderStading Part 2 

const root = document.getElementById("root");
   
        function Container() {
            const [counter, setCounter] = React.useState(0);
            const onClick = () => {
                setCounter(counter+1);
            };
            return(
            <div> 
            <h3>Total Clicks: {counter}</h3>
            <button onClick = {onClick}>Click me</button>
            </div>
            );
        };
        ReactDOM.render(<Container/>,root);

 

➣ React.useState()

   데이터 보관 후 자동으로 렌더링 일으킨다

  [counter, setCounter] 

  counter = 현재 값, setCounter = 상태 업데이트하는 함수

 

실행페이지

 

---

 

• htmlFor ( HTML의 for)

<label> 요소, 폼 요소 연결 ( label 클릭 시 폼 요소 활성화)

*htmlFor 속성 값은 폼 요소의 id 속성 값과 일치해야 한다

 

 

• State

state 세팅

1. 직접 값 지정

setCounter(21);

 

2. 함수 이용 (안전한 방법)

//setCounter(counter+1);
setCounter((current) => current + 1)

➣ 첫 번째 argument 현재값, return 값 새로운 state

 

 

• select

 <select value={index} onChange={onSelect}>
    <option value ="0">Minutes & Hours</option>
    <option value ="1">Km & Miles</option>
</select>

 

➣ select 안에 option들 존재

 

 

• if 문

{index === "0" ? <MinutesToHours/> : null}

 

 { } 사용할 것!  (중괄호 사용하지 않으면 그냥 text일 뿐)

※ { } 안에는 JS를 쓸 수 있다

 

+) if - true => <MinutesToHours/> 실행

        - false => null 실행

 

---

 

Select your units 실행 페이지

 

 

Minutes & Hours 실행 페이지

 

Km & Miles 실행 페이지