[TIL] Day 32 스타일 컴포넌트 조건부 렌더링

2023.11.17 금

 

수정중...

스타일 컴포넌트 조건부 렌더링에서 발생하는 오류들

 

React.memo]
export default React.memo(Box1);

스냅샷을 저장하고 그대로 불러와서 불필요한 렌더링을 하지 않게한다.
무거운 작업에서 필수


yarn add axios

fetch then

async await


useEffect
컴포넌트 렌더링이 완료된 후 실행되도록

 

 

♠
<h3>누구에게 보내실 건가요?</h3>
          <select
            value={btnClicked}

defaultValue 가 아니라 그냥 value....

 

 

♠
스탠다드 Q&A
Q) 왜 리액트 컴포넌트의 return문 이하에 if문 등 기타 제어 흐름 문법을 사용할 수 없나요?
import React from "react";

const App = () => {
  return <div>{
    if () {
      // 안됨!
    }
  }</div>;
};

export default App;

A)
그 이유는, JSX의 설계 목적 자체가 우리가 의도한 UI를 선언적으로(지난 시간에 잠깐 다뤘었죠) 표현하기 위해서 그렇습니다. UI를 그리는 데에 초점이 맞춰져야 할텐데 우리가 너무 많은 제어 흐름 문법을 사용하게 되면 그 본질인 ‘UI를 핸들링하는데’에 가독성 측면에서(+@) 문제가 있을 수 있곘죠. 따라서 큰 흐름을 해치지 않는
삼항연산자
논리연산자
조건부렌더링
외부 함수를 사용한 조건부 렌더링
등이 본래의 기능을 위해서는 더 적합해 보입니다.