[React]3 조건부렌더링,useState

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

 

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

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

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

 

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