동백 // 노마드 코더 React JS: STATE

출처 : https://nomadcoders.co/

노마드 코더 Nomad Coders

 

---

 

Understanding State

 

핵심 : React JS의 state에 대해 배워본다.

 

 

 

. state는 기본적으로 데이터가 저장되는 곳이다.

 

function handleClick() {
        counter = counter + 1;

. 위의 counter 변수의 역할을 state로 대신할 수 있음. // 즉 값이 바뀌는 데이터들

 

 

1. 예전 방식으로 counter 만들기

 

    const root = document.querySelector("#root"); 
    let counter = 0;
    function cntUp(){
        counter = counter + 1;
        render();
    }
    function render(){
        // 함수가 호출 될 때마다 UI를 업데이트(렌더링) 해주는 함수
        ReactDOM.render(<Container/>, root);
    }

    const Container = () => (
        <div>
            <h3>Total clicks: {counter}</h3> 
            <button onClick={(cntUp)}>Click me!!!</button>
        </div>   
        );
        // 어플리케이션이 시작될 때 render 함수 호출
        render();

. 이게 왜 예전 방식이냐면 값이 업데이트 될 때마다 우리는 다시 렌더링을 해주어야 하기 때문이다. 

 

 

 

. 예전 방식이라해도 코드가 어떻게 동작하는지 정확히 숙지하고, 이해해야 한다.

 

 

---

 

 

setState part One

 

핵심 : 리렌더링(업데이트 된 값을 다시 렌더링하는 것)을 발생시킬 가장 좋은 방법에 대해서 알아본다.

 

 

 

. React.js 어플 내에서 데이터를 보관하고 자동으로 리렌더링을 일으킬수있는 방법에 대해 배운다.

 

. React.useState() 함수는 호출하면, 배열을 반환하여주는데 첫번째 원소(undefined)는 현재 상태값 원소이고, 두번째 원소(f)는 첫번째 원소를 바꿀 때 사용하는 함수이다.

const data = React.useState();

. React.useState()는 초기값을 줄 수 있다.

const data = React.useState(0);

 

. 그러나 useState()는 반환값으로 배열을 주기 때문에, 일일이 사용하기 번거롭다. 어떻게 하면 배열에서 요소들을 꺼내서 이름들을 부여할 수 있을까?

const food = ["tomato", "potato"];

const [first, second] = food;
이렇게 적으면 first에는 "tomato"가 second에는 "potato"라는 이름이 붙는다.

. 위의 멋있는 문법을 useState()에 사용할 수 있다.

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

 

useState() 함수에 대해

출처 :https://xiubindev.tistory.com/97https://www.daleseo.com/react-hooks-use-state/

 

 

 

 

---

 

 

setState part Two

 

핵심 : 리렌더링(업데이트 된 값을 다시 렌더링하는 것)을 발생시킬 가장 좋은 방법에 대해서 알아본다.

 

 

 

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

. modifier 함수는 ()안의 값으로 업데이트하고 자동으로 리렌더링을 일으켜준다.

 

. 가장 편하고 쉽게 리랜더링하는 코드

    const root = document.querySelector("#root"); 
    function App(){
        const [counter, setCounter] = React.useState(0);
        // onClick 함수는 실행 시 modifier(counter + 1)를 반환해준다.
        const onClick = () => {
            //modifier 함수는 ()안의 값으로 업데이트하고 자동으로 리렌더링을 일으켜준다.
            modifier(counter + 1);
        }
        return(
        <div>
            <h3>Total clicks: {counter}</h3> 
            <button onClick={onClick}>Click me!!!</button>
        </div>   
        );
    }
    ReactDOM.render(<App />, root);

 

. modifier 함수를 이용해서 state를 바꾸면, 컴포넌트가 재생성되고, 전체 코드가 다시 실행되면서 새로운 값을 가지고 리랜더링 하게 된다. 즉 모든 요소를 새로운 값을 가지고 재생성 하고있다. 

state가 (modifier에 의해서) 바뀌면 리랜더링이 일어난다.

 

 

---

 

 

State Functions

 

핵심 : State를 연습하고, form을 만들었을 때 state는 어떤식으로 작용하는지에 대해 배운다.

 

 

state를 설정하는 방법

 

1. setCounter (modifier)를 이용해서 우리가 원하는 값을 넣어주는 방법

        const [counter, setCounter] = React.useState(0);
                const onClick = () => {
            //modifier 함수는 ()안의 값으로 업데이트하고 자동으로 리렌더링을 일으켜준다.
            setCounter("lalalla");
        }

 

2. current 함수를 전달해서 현재 값(state)을 계산하는 방법

. current 함수는 언제나 현재 state를 얻도록 도와줌.

        const [counter, setCounter] = React.useState(0);
        // onClick 함수는 실행 시 modifier(counter + 1)를 반환해준다.
        const onClick = () => {
            // current는 현재 state인 counter값을 줄거고, 변화를 준다.
            setCounter((current) => current+1);
        }

 

 

 

---

 

 

Inputs and State

 

핵심 : unit의 converter(단위 변환기)와 money converter를 만들며, state를 더 이해해본다.

 

 

. 맨 처음 시작 JSX 코드

<script type="text/babel">
    const root = document.querySelector("#root"); 
    function App(){
        return(
            <div>
                <h1>Super Converter</h1> 
                {/*lable은 사용자가 input에 뭘 적어야할지 알려줍니다.*
                    for은 input과 label을 연결시켜줍니다.*/}
                <label htmlFor="minutes">Minutes</label>
                <input id ="minutes" placeholder="Minutes" type="number"/>
                <label htmlFor="hours">Hours</label>
                <input id ="hours" placeholder="Hours" type="number"/>
            </div> 
        );
    }
    ReactDOM.render(<App />, root);

 

 

 

. jsx는 HTML과 비슷하지만 다른 점이 있다.

1. class를 사용하면 안된다. -> className으로 사용해야 함.

2. for를 사용하면 안된다. -> htmlFor으로 사용해야 함.

 

 

1. minutes에 필요한 state를 만든다.

<script type="text/babel">
    const root = document.querySelector("#root"); 
    function App(){
        const [minutes, setMinutes] = React.useState();
        const onChange = () => {

        };
        return(
            <div>
                <h1>Super Converter</h1> 
                {/*lable은 사용자가 input에 뭘 적어야할지 알려줍니다.
                    for은 input과 label을 연결시켜줍니다.*/}
                <label htmlFor="minutes">Minutes</label>
                <input         
                    value = {minutes}
                    id ="minutes" 
                    placeholder="Minutes" 
                    type="number"
                    onChange={onChange}
                    />
                <label htmlFor="hours">Hours</label>
                <input 
                    id ="hours" 
                    placeholder="Hours" 
                    type="number"/>
            </div> 
        );
    }
    ReactDOM.render(<App />, root);    
    </script>

. react code로 minutes에 어떤 숫자를 적었는지 추적할 수있다.

. onChange 이벤트는 새로운 입력등 변화를 받을 때 마다 호출됨.

. input의 value를 state의 value와 같게 함으로써 입력이 되면 state로 input된 값을 보내줌.

 

2. input에 입력된 값을 modifier로 받는다.

        const onChange = (event) => {
            // modifier에 input에서 입력된 값을 넣어줌.
            setMinutes(event.target.value);
        };

---

 

 

State practice

 

핵심 : State의 원리와 개념에 대해서 이해한다.

 

<script type="text/babel">
    const root = document.querySelector("#root"); 
    function App(){
        const [minutes, setMinutes] = React.useState(0);
        const onChange = (event) => {
            // modifier에 input에서 입력된 값을 넣어줌.
            setMinutes(event.target.value);
        };
        return(
            <div>
                <h1>Super Converter</h1> 
                {/*lable은 사용자가 input에 뭘 적어야할지 알려줍니다.
                    for은 input과 label을 연결시켜줍니다.*/}
                <label htmlFor="minutes">Minutes</label>
                <input         
                    value = {minutes}
                    id ="minutes" 
                    placeholder="Minutes" 
                    type="number"
                    onChange={onChange}
                    />
                <h4>You want to convert {minutes}</h4>
                <label htmlFor="hours">Hours</label>
                <input 
                    id ="hours" 
                    placeholder="Hours" 
                    type="number"/>
            </div> 
        );
    }
    ReactDOM.render(<App />, root);    
    </script>

 

 . 위 코드를 이해해봅시다.

1. state를 만들고 초기값을 0으로 설정해줌

const [minutes, setMinutes] = React.useState(0);

 

2. input의 value를 state로 연결해줌 // 연결해주면 input의 value를 어디서든 수정해줄 수있다.

<input         
                    value = {minutes}

 

3. onChange 함수를 만들어줌 // onChange 함수는 데이터를 업데이트 해주는 역할을 함

즉 change이벤트, 사용자가 input에 뭔가 써넣거나 지웠을 때 onChange 함수가 실행된다.

<input         
                    value = {minutes}
                    id ="minutes" 
                    placeholder="Minutes" 
                    type="number"
                    onChange={onChange}
                    />

 

4. onChange 함수가 실행되면 setMinutes(modifier)에 event.target.value(input.value)를 넣어줌.

        const onChange = (event) => {
            // modifier에 input에서 입력된 값을 넣어줌.
            setMinutes(event.target.value);
        };

 

. Hours로 바꿔주는 기능을 구현해준다.

 

1. 분을 시단위로 고쳐주는 공식을 적용한다.

                    <div>
                        <label htmlFor="hours">Hours</label>
                        <input 
                            value = {Math.round(minutes/60)}
                            id ="hours" 
                            placeholder="Hours" 
                            type="number"/>
                    </div>

 

 

2. reset 버튼을 만들어주고 클릭시 호출될 함수를 만들어준다.

const reset = () => {
            setMinutes(0)
        };
        

<!-- 아래는 JSX에서 -->
<button onClick={reset}>Reset</button>

 

3. hours input에 글자를 적지 못하게 만든다. (disabled 속성을 통해서)

<label htmlFor="hours">Hours</label>
                        <input 
                            value = {Math.round(minutes/60)}
                            id ="hours" 
                            placeholder="Hours" 
                            type="number"
                            disabled
                            />

. 시에서 분으로 역으로 바꿔주는 기능도 구현한다.

// flip 버튼을 누르면 반대로 hours를 입력가능하게 만들고, minutes을 disabeld하게 만들어줌

 

1. Filped 버튼을 만들어주고, 클릭시 flip되는 함수를 만들어준다.

<button onClick={onFlip}>Flip</button>

const onFlip = () => {
         
        };

 

2. 기본값이 false인 state를 만들어준다.

const [flipped, setFlipped] = React.useState(false);

 

3. fliped가 false면 true를 반환하고, true면 false를 반환하는 setFlipped함수(modifier)를 설정해줘야함.

const onFlip = () => setFlipped((current) => !current);

 

4. state 값으로 input을 enabled 할지, disabled할지 정할 수 있다.

. 기본값이 false이기 때문에 시작은 hour가 disabled상태임

 

<div>
                        <label htmlFor="minutes">Minutes</label>
                        <input         
                            disabled={flipped === true}
                            />
                    </div>
                    <div>
                        <label htmlFor="hours">Hours</label>
                        <input 
                            disabled={flipped === false}
                            />
                    </div>

 

 

5. hours input의 change event를 리스닝한다.

                    <div>
                        <label htmlFor="hours">Hours</label>
                        <input 

                            onChange={onChange}

                            />
                    </div>

 

6. Minutes에 썼을 때는 단위 변환이 일어나고 Hours에 썼을 때는 쓴 그대로 출력되게 만든다.

. 삼항연산자를 통해서 

 

. minutes

value = {flipped ? amount * 60 : amount}

. 만약 flipped 상태라면? 즉 기본값인 false라면 amount*60을 출력하고, flipped 상태가 아니면 amount를 출력하라.

 

. hours

value = {flipped ? amount : Math.round(minutes/60)}

. 만약 flipped 상태라면? 즉 기본값인 false라면 amount를 출력하고, flipped 상태가 아니면 Math.round(minutes/60) 를 출력하라.

 

 

7. flip을 할 때마다 변환된 값이 변하는 점을 고쳐야 함.

const onFlip = () => {
            reset();
            setFlipped((current) => !current);
        };

. flip 버튼이 눌릴 때마다 reset() 함수 호출

 

 

3강 최종코드

https://github.com/yardyard/nomadcoderReactJS/blob/master/converter.html

GitHub - yardyard/nomadcoderReactJS

 

 

 

핵심 요약

1. 예전 방식이라해도 코드가 어떻게 동작하는지 정확히 숙지하고, 이해해야 한다.

 

2. state는 기본적으로 데이터가 저장되는 곳이다.

 

3. React.useState() 함수는 호출하면, 배열을 반환하여주는데 첫번째 원소(undefined)는 현재 상태값 원소이고, 두번째 원소(modifier)는 첫번째 원소를 바꿀 때 사용하는 함수이다.

 

4. modifier 함수는 ()안의 값으로 업데이트하고 자동으로 리렌더링을 일으켜준다.

 

5. state가 (modifier에 의해서) 바뀌면 리랜더링이 일어난다.

 

6. React.useState()는 초기값을 줄 수 있다.

 

7. jsx는 HTML과 비슷하지만 다른 점이 있다. {
   1) class를 사용하면 안된다. -> className으로 사용해야 함.
   2) for를 사용하면 안된다. -> htmlFor으로 사용해야 함.

}

 

8. onChange 이벤트는 새로운 입력등 변화를 받을 때 마다 호출됨.

 

9. input의 value를 state의 value와 같게 함으로써 입력이 되면 state로 input된 값을 보내줌.

 

10. 리렌더링 조건 {

   1) props이 바뀔 때

   2) state가 modifier에 의해서 바뀔때

   3) 부모 컴포넌트가 리렌더링 될 때