[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 18회차 미션

패스트캠퍼스 프론트엔드 인강 18일차 리액트 조건부랜더링을 배우고 usestate를 통한 동적상태관리를 배웠다.

 

조건부 랜더링이란?

특정조건이 참인지 거짓인지에따라 다른결과가 나온다.

App.js

import React from "react";
import "./styles.css";
import Hello from "./Hello";

export default function App() {
  return <Hello name="react" color="red" isSpecial={true}/>;
}

참고로 isSpecial={true}에서 boolean은 true인경우 생략이 가능하다.

import React from "react";
import "./styles.css";
import Hello from "./Hello";

export default function App() {
  return <Hello name="react" color="red" isSpecial/>;
}

 

JSX안에 isSpecial={true}를 넣고 값이 true면 *가 나오게해보자

먼저 삼항연산자로 할수있다.

***jsx에서 falsy한 값인 null, undefined,false는 아무것도 안나타나지만 0은 예외로 나타난다.

Hello.js

import React from "react";

export default function Hello({ name, color, isSpecial }) {
  return (
    <div style={{ color }}>
      {isSpecial ? <b>*</b> : null}
      h2 {name}
    </div>
  );
}

 

&&연산자로표현하면 더 간단하다

import React from "react";

export default function Hello({ name, color, isSpecial }) {
  return (
    <div style={{ color }}>
      {isSpecial && <b>*</b>}
      h2 {name}
    </div>
  );
}

단순히 참거짓일때는 &&연산자가편하고 값이 다 다를경우는 삼항연산자가 쓰기좋다

예)

{isSpecial ? '맞습니다' : '아닙니다'}

 

usestate를 통한 동적 상태관리

컴포넌트에서 보여줘야하는사항이 사용자 인터렉션에따라 바뀌어야할때 usestate를 사용한다.

counter프로젝트를 통해 예시를 들수있다.

 

App.js

import React from "react";
import "./styles.css";
import Counter from "./Counter";

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

 

Counter.js

import React, { useState } from "react";

function Counter() {
  const [number, setNumber] = useState(0);
  // number는 현상태 setNumber는 바꿔주는 함수
  //useState(0) 기본값은 0이다.

  const onIncrease = () => {
    setNumber(number + 1);
  };
  const onDecrease = () => {
    setNumber(number - 1);
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>increase</button>
      {/* html과 달리 jsx는 함수를 호출하는게아니라 넣어줘야한다 */}
      <button onClick={onDecrease}>decarease</button>
    </div>
  );
}
export default Counter;

코드최적화를 위해 setNumber함수에 prevNumber => prevNumber+1가 들어가는데 이것은 다음에 알아보도록한다.

https://bit.ly/31Cf1hp

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스