공부방

리액트에서 input 태그의 상태를 관리하는 방법 

인풋태그를 넣어서 사용할 컴포넌트를 하나 만들어준다 

InputSample.js

import React from 'react'

function InputSample(){


    return(
        <div>
            <input/>
            <button>초기화</button>
            <div>
                <b>값:</b>
            </div>
        </div>
    )
}

export default InputSample

InputSample컴포넌트를 App.js에서 렌더링해준다 

import InputSample from './components/InputSample';

function App() {
  return (
      <InputSample/>
    );
}

export default App;

그럼이렇게 화면이 나오게된다.

인풋에 입력하는 값이 아래의 값: 옆에 나오게하고

초기화 버튼을 누르면 인풋태그의 값이 지워지게 해줄것이다.

useState를 사용하여상태값이 변경될때마다 페이지의 값도 변하게 해준다

function InputSample(){
    const[input,setinput] = useState("") 
    const change = (e)=>{
        setinput(e.target.value)
    }
    const reset = ()=>{
        setinput("")
    }

    return(
        <div>
            <input value={input} onChange={change}/>
            <button onClick={reset}>초기화</button>
            <div>
                <b>값:{input}</b>
            </div>
        </div>
    )
}

이렇게 써주면 input태그의 값이변할때(onChange될때)  {change}함수가 실행되게 되고

change함수는 setinput으로 input상태의 값에 input 태그의 현재 입력되고있는 value를 넣어주게된다

결과적으로 input태그자체에 써져있는 밸류도 바뀌면서 아래에있는 값 : 옆에도

변경되는 input값이 들어가게된다.

button을 클릭하면 setinput(" ")이 실행되면서 input상태값은 공백이된다

입력한 값이 잘나오고 초기화를 누르면 초기화도 아주 잘된다 ^^ 항상 좀 이랬으면....

다시 이번에는 인풋을 여러개 넣고 사용해보겠다.

InputSample.js

function InputSample(){
    const change = (e)=>{
    }
    const reset = ()=>{
    }

    return(
        <div>
            <input placeholder='이름'/>
            <input placeholder='닉네임'/>
            <button onClick={reset}>초기화</button>
            <div>
                <b>값:</b>
                이름 (닉네임)
            </div>
        </div>
    )
}

input.js파일을 위처럼 수정해준다.

인풋이 2개인 화면이 만들어진다.

여기에 값두개를 인풋두개에 각각 관리할수있는 상태값으로 이름과 닉네임을 따로 띄워준다

function InputSample(){
    const[inputs,setInputs] = useState({
        name:'',
        nickname:''
    });
    const {name,nickname} =inputs; //inputs를 객체구조분해할당
    
    const change = (e)=>{
        const{value,name} =e.target //e.target=함수를실행시키는요소
                                    // 에서 name과 value값을 할당
        setInputs({
            ...inputs, //원래있던 인풋객체를 펼쳐서넣어줌
            [name]:value // name변수의 키를가진 값을 value로 설정
        });
    };

    const reset = ()=>{
        setInputs({
            name:"",
            nickname:'',
        });
    };

    return(
        <div>
            <input name='name' placeholder='이름' onChange={change} value={name}/>
            <input name='nickname' placeholder='닉네임' onChange={change} value={nickname}/>
            <button onClick={reset}>초기화</button>
            <div>
                <b>값:</b>
                {name} {nickname}
            </div>
        </div>
    )
}

인풋이 두개라서 useState를 이용해서 상태값을 2개만들면 편하겠지만

그러면 함수도 2개만들어야 되고  아마 개발자님들은 그런 방법을 좋아하시지 않는것같다...

useState를 한번만이용하고 대신 값을 객체로 넣어서 2개의 변수를 사용할수있게 해준다.

useState로 변수를 만들때 inputs에 name : " " , nickname : " " 프로퍼티 들이 들어가고

이 프로퍼티들을 객체 구조분해 할당으로 {name,nickname} 변수에 담아준것이다 

그리고 인풋에 값을 입력해서 change함수가 실행되면 실행한 인풋태그의 name과 value 값을 가져와서 변수로 저장하고

setInputs() 을 실행시키는데 ...inputs(스프레드구문) 으로 inputs안에 있는

객체를 펼쳐서 넣어주고(원래있던값을저장)

새롭게  name변수 (닉네임인풋을 실행시키면 nickname이 들어가고

네임 인풋으로 실행되면 name이 들어감) 키에 밸류로 입력한 값이 들어가게된다. 

최대한 풀어서 설명하긴했는데 천천히 읽다보면 아마 이해가되지않을까 ? 혹시 이해가안되는 점이있다면 댓글로달아주시면 제가 이해한부분에대해서는 설명해드리겠습니다. 저도모른다면 죄송합니다....

저는 벨로퍼트라는 분의 예제를 보고 따라하면서 공부하고 있으니 더 자세한 정보가 필요하시다면 구글에 vlpt검색하고 들어가시면 더 좋은 자료 찾으실수있을거에여 열공합시다~

조건부 렌더링이란 특정조건에따 다른결과물을 렌더링해주는것이다.

App.js 에서Hello 컴포넌트를 사용할때 Props로 isSpecial={true}를 전송해준다

true는 자바스크립트의 불린이기 때문에 중괄호로 감싸줘야한다. 

function App() {
  return (
    <div className="App">
      <Wrapper>
        <Hello name="ME" color="turquoise" isSpecial={true}/>
        <Hello color="pink"/>
      </Wrapper>
    </div>
  );
}

function Hello({color,name,isSpecial}){
    return(
            <div style={{color}}>
                {isSpecial ? <b>*</b>: null}
                안녕하세요 {name}
            </div>
        )
}
Hello.defaultProps = {
    name:"이름없음",
}

Props로 isSpecial을 받아서 삼항연산자로 true이면 <b>*</b> false이면 null을 출력한다.

JSX에서 Null,undefined,false를 렌더링하면 아무것도 나타나지않는다.

function Hello({color,name,isSpecial}){
    return(
            <div style={{color}}>
                {isSpecial && <b>*</b>}
                안녕하세요 {name}
            </div>
        )
}
Hello.defaultProps = {
    name:"이름없음",
}

삼항연산자 대신 && 형태로도 사용이가능하다 isSpecial 이 true 이면 <b>*</b>을 출력하고 그렇지않다면 false를 출력해준다. 단순한 조건문일때는 이렇게 줄여서 쓰는 쪽이좋고 조금 복잡한 조건을 줄때는 삼항연산자를 사용해서 조건을 주는게 좋아보인다.

props 값을 설정하게 될 때 만약 props 이름만 작성하고 값 설정을 생략한다면, 이를 true 로 설정한것으로 된다

function App() {
  return (
    <div className="App">
      <Wrapper>
        <Hello name="ME" color="turquoise" isSpecial/>
        <Hello color="pink"/>
      </Wrapper>
    </div>
  );
}

이렇게 isSpecial 을 만들고 값을 넣지않아도 똑같이 출력이된다 isSpecial = {true} 랑 같음

상태관리(State)

이번에는 useState 라는 함수를 사용해보게 되는데, 이게 바로 리액트의 Hooks 중 하나입니다. (라고 하시네요..)

들은 얘기로는 원래는 클래스형컴포넌트? 에서만 쓸수있었는데 16버전부터인가 함수형도 쓸수있게 되었다고 한다.

우선 상태관리 예제를 만들자..

Counter.js

import React from 'react'

function Counter(){
    return (
        <div>
            <h1>0</h1>
            <button>+1</button>
            <button>-1</button>
        </div>
    )
}

export default Counter

Counter 컴포넌트를 App.js에 넣어서 렌더링 해준다

App.js

import Counter from './components/Counter';

function App() {
  return (
      <Counter/>
    );
}

export default App;

이제 카운터에서 버튼을 클릭했을때 숫자값이 변하게되는 이벤트를 걸어주면 된다.

import React from 'react'

function Counter(){
    const onIncrease = ()=>{
        console.log('+1')
    }
    const onDecrease = ()=>{
        console.log('-1')
    }
    return (
        <div>
            <h1>0</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    )
}

export default Counter

함수를 두개 만들어주고  태그에 클릭이벤트가 발생할때 함수가실행되도록 걸어줬다.

콘솔로그를 했으니 콘솔에는 잘출력되었지만 이 함수로는 저 0값을 바꿀수없다,...그리고 더하기를 해줘서 값을

변경시킨다고 해도 바로 반영되지않는다. 여기서 이제 State가 필요한것이다.

컴포넌트에서 동적인 값을 상태(state)라고 부릅니다. 리액트에 useState 라는 함수가 있는데요, 이것을 사용하면 컴포넌트에서 상태를 관리 할 수 있습니다.(라고 선생님께서는 말씀하셨지,,)

import React,{useState} from 'react'

React를 임포트한줄에서 useState도 임포트 해준다 . 그러면 이제 useState를 사용할수있다

Counter.js

import React,{useState} from 'react'

function Counter(){
    const [number,setnumber] = useState(0)
    const onIncrease = ()=>{
        setnumber(number+1)
    }
    const onDecrease = ()=>{
        setnumber(number-1)
    }
    return (
        <div>
            <h1>{number}</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    )
}

export default Counter

갑자기 코드에서 처음본게 생겨서 많이 당황스러울텐데 설명을 해보자면

 useState함수를 사용하면 초기값과 초기값을 변경할수있는 배열을 리턴해준다 위 코드의 경우에는

useState(0) 으로 초기값을 0으로 설정해서

number변수에 저장했고 이 값을 변경할수있는 함수를 setnumber에 저장한것이다.

그리고 함수가 실행될때 setnumber를 이용해서 number값을 변경시켜주고 

숫자 0이있던 위치에 number변수를 넣어준것이다.

그럼 이제 클릭할때마다 state인 number값이 변하게되고 state가 변경되면 리액트 페이지에서 DOM을 비교해서 바뀐값을 바로바로 반영해주게되는것이다.

함수형 업데이트

지금은 Setter 함수를 사용 할 때, 업데이트 하고 싶은 새로운 값을 파라미터로 넣어주고 있는데요, 그 대신에 기존 값을 어떻게 업데이트 할 지에 대한 함수를 등록하는 방식으로도 값을 업데이트 할 수 있습니다.

Counter 컴포넌트를 다음과 같이 수정해보세요.

import React,{useState} from 'react'

function Counter(){
    const [number,setnumber] = useState(0)
    const onIncrease = ()=>{
        setnumber(prevNumber=>prevNumber+1)
    }
    const onDecrease = ()=>{
        setnumber(prevNumber=>prevNumber-1)
    }
    return (
        <div>
            <h1>{number}</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    )
}

export default Counter

값을 업데이트 하는 함수를 파라미터로 넣어주었습니다.

함수형 업데이트는 주로 나중에 컴포넌트를 최적화를 하게 될 때 사용하게 됩니다. 지금 당장은 함수형 업데이트란게 있는 것 정도만 이해해두시면 충분합니다. 이게 왜 최적화랑 관련이 되어있는지는 나중에 알아보도록 할게요.(라고 하십니다 선생님 너무 어려워요,,,ㅜㅠㅠㅠ)

일단 상태를 변경하는 방법까지는 끝!! 거의다 이해가되는것같다.