React - Hook, Conditional Rendering

Hook

• 함수형 component 에서 class형 component 기능 사용 가능케 하는 기능
• react 는 상태 관리 가능한 useState, 렌더링 직후 작업 설정하는 useEffect 등의 Hook 제공

Hook 규칙

• 반드시 react 함수 component 최상위 레벨에서만 호출
  • 반복문, 조건문, 중첩된 함수 내에서 호출 불가
• component가 렌더링 될 때마다 매번 동일한 순서로 호출되어야 함

eslint-plugin-react-hooks

• hook 의 규칙을 따르도록 강제해주는 plugin
• 정적 코드 분석 도구

Custom Hook 생성 목적

• 여러 Component에서 반복적으로 사용되는 로직을 Hook으로 만들어 재사용하기 위함

Conditional Rendering

• 조건문 결과(true, false)에 따라 렌더링 달라짐

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

JavaScript의 Truthy, Falsy

• Boolean 자료형
• Truthy: true는 아니지만 true로 여겨지는 값
• Falsy: false는 아니지만 false 로 여겨지는 값

Element Variables

• React의 element를 변수처럼 사용 가능
• component 일부를 conditional rendering 가능

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}
function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

// 생략
let button;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
// 생략

Inline Conditions

• 조건문을 코드 안에 집어넣는 것

1. Inline If

• && 연산자 사용
  - 양쪽의 조건문이 모두 true 인 경우에만 true
  true && expression -> expression
• 첫번째 조건문이 true 이면 두번째 조건문을 검증
  false && expression -> false
• 첫번째 조건문이 false 이면 바로 false 반환 (단축 평가)

2. Inline If-Else

• ? 연산자 사용

condition ? exprIfTrue : exprIfFalse

• 조건문이 true 인 경우 첫번째 항목 exprIfTrue 리턴, false 이면 두번째 항목 exprIfFalse 리턴