2025 / 03 / 19
오늘 수업 시간에는 useState 복습과 함께 조건별 컨텐츠 렌더링을 배웠습니다.
조건을 거는 형식이 if가 아니라 삼항연산자라서 헷갈리는 부분도 있었습니다.
이번 내용은 주의해야할 점이 있어서 조금 자세하게 다뤄보도록 하겠습니다.
💌 조건별 컨텐츠 렌더링
- 어떤 조건에 따라 다른 UI를 보여주는 것을 의미합니다.
- 상태(state)나 속성(props)의 값에 따라 다르게 렌더링할 수 있습니다.
- 사용자가 원하는 상태를 화면에 동적으로 반영하는 데 필요한 중요한 개념입니다.
- ex) 로그인 상태, API 요청 결과, 사용자 선택에 따라 화면을 다르게 보여줄 수 있습니다.
💌 구현하는 방식
- 조건별 컨텐츠 렌더링을 구현하는 방식에는 3가지가 있습니다.
1. if문 사용
- if문은 JSX 외부에서 사용하여 조건에 맞는 다양한 JSX를 반환하도록 할 수 있습니다.
- 복잡한 조건에 따라 다양한 UI를 처리할 수 있습니다.
function MyComponent() { const isLoggedIn = true; let content; if (isLoggedIn) { content = <h1>Welcome back, User!</h1>; } else { content = <h1>Please log in</h1>; } return <div>{content}</div>; }
- if 문을 통해 조건에 맞는 jsx를 설정하고, 해당 값을 jsx에서 출력합니다.
- 복잡한 조건을 처리하거나 다양한 경우에 대해 다른 UI를 렌더링할 때 유용합니다.
2. 삼항 연산자 사용
- 삼항 연산자(?:)는 한 줄로 간단하게 조건을 처리할 수 있는 표현식입니다.
- 조건에 따라 다른 값을 직관적으로 반환할 수 있어 많이 사용됩니다.
function MyComponent() { const isLoggedIn = true; return ( <div> {isLoggedIn ? <h1>Welcome back, User!</h1> : <h1>Please log in</h1>} </div> ); }
- isLoggedIn이 true일 경우
<h1>Welcome back, User!</h1>를 렌더링합니다. - false일 경우
<h1>Please log in</h1>을 렌더링합니다. - 한 줄로 조건을 처리할 수 있어 간결하게 작성할 수 있습니다.
3. 논리 연산자 사용
- && 논리 연산자는 조건이 참일 때만 해당 내용을 렌더링할 수 있도록 합니다.
- 조건이 false일 경우 아무것도 렌더링되지 않습니다.
function MyComponent() { const isLoggedIn = true; return ( <div> {isLoggedIn && <h1>Welcome back, User!</h1>} </div> ); }
- isLoggedIn이 true일 때만
<h1>Welcome back, User!</h1>가 렌더링됩니다. - isLoggedIn이 false일 경우 아무것도 렌더링되지 않습니다.
- 조건이 참일 때만 렌더링이 필요할 때 유용합니다.
💌 사용 예시
TabButton 컴포넌트의 조건별 렌더링
- TabButton을 클릭했을 때 각 주제에 맞는 컨텐츠를 동적으로 변경해주고 있습니다.
function App() { const [label, setLabel] = useState(""); // label 상태값 const tabclick = (selectedLabel) => { setLabel(selectedLabel); // 클릭한 탭에 맞는 label 상태 설정 }; const infor = { data: "데이터 전달", component: "재사용 컴포넌트", style: "동적 스타일링", }; return ( <section className="example"> <h2>예시</h2> <menu> <TabButton label="data" on={tabclick}>데이터 전달</TabButton> <TabButton label="component" on={tabclick}>재사용 컴포넌트</TabButton> <TabButton label="style" on={tabclick}>동적 스타일링</TabButton> </menu> <hr /> {/* 선택된 label에 맞는 컨텐츠만 렌더링 */} {label === "" ? ( <p>주제를 선택해주세요!</p> ) : ( <TabContent section={infor[label]} /> )} </section> ); }
- TabButton을 클릭하면 setLabel을 사용하여 label 값을 변경합니다.
- label 값에 맞는 컨텐츠를 동적으로 렌더링합니다.
- ex) label이 "data"일 경우,
infor["data"]값인 "데이터 전달"을 화면에 출력 - label이 빈 문자열이면 "주제를 선택해주세요!"라는 메시지가 렌더링됩니다.
- label 값이 설정되면 해당 주제의 내용을 표시하는 TabContent가 렌더링됩니다.
💌 핵심 포인트
- 삼항 연산자(?:)를 사용하여 label 값에 맞는 컨텐츠를 다르게 표시하고 있습니다.
- label === ""일 경우, 초기 상태로 주제 선택을 유도하는 메시지를 출력합니다.
- 선택된 주제에 맞는 동적 콘텐츠만 렌더링되도록 처리하고 있습니다.
💌 작동 원리
- 조건부 렌더링은 React가 상태(state)나 속성(props)의 변경을 감지하여 컴포넌트를 다시 렌더링하는 방식을 의미합니다.
- 이를 통해 조건에 맞는 UI를 동적으로 업데이트할 수 있습니다.
1. 상태나 속성 변경 → 컴포넌트 리렌더링
2. 렌더링 중 조건을 확인 → 조건에 맞는 내용만 출력
- 조건에 맞는 UI만 보여주거나, 상태에 따라 다른 뷰를 보여주는 방식을 사용합니다.
- 이로 인해 동적인 사용자 인터페이스를 만들 수 있습니다.
💌 주의할 점
JSX 안에서 if문 사용 불가
- React의 JSX 안에서는 if 문을 직접 사용할 수 없습니다.
- JSX는 JavaScript 문법을 확장한 형태입니다.
- JavaScript의 일반적인 제어문인 if문은 JSX 내부에서 바로 사용할 수 없습니다.
- if문은 JSX 외부에서 사용할 수 있습니다.
- JSX는 반환되는 값이어야 하므로, 조건에 따라 어떤 JSX를 반환할지 if문을 외부에서 처리한 후, 조건에 맞는 JSX를 반환하는 방식으로 해결할 수 있습니다.
1. 사용 불가 예시
- 컴포넌트 내부에서 if를 사용하는 예시입니다.
function MyComponent() { const isLoggedIn = true; return ( <div> if (isLoggedIn) { return <h1>Welcome, User!</h1>; } else { return <h1>Please log in</h1>; } </div> ); }
- if문을 JSX 안에 넣으면 오류가 발생합니다.
- JSX 안에서는 if문을 사용할 수 없기 때문입니다.
2. 외부 처리
if문을 JSX 외부에서 처리하는 방법
- 조건을 처리하고, 결과로 JSX를 반환하는 방식으로 if문을 외부에서 사용할 수 있습니다.
function MyComponent() { const isLoggedIn = true; let message; if (isLoggedIn) { message = <h1>Welcome, User!</h1>; } else { message = <h1>Please log in</h1>; } return ( <div> {message} </div> ); }
- if문을 외부에서 사용하여 조건에 맞는 message를 설정한 후, 값을 JSX에서 출력합니다.
3. 삼항 연산자
- 삼항 연산자(?:)를 사용하여 조건에 따라 JSX를 렌더링하는 방법이 간편하고 많이 사용됩니다.
function MyComponent() { const isLoggedIn = true; return ( <div> {isLoggedIn ? <h1>Welcome, User!</h1> : <h1>Please log in</h1>} </div> ); }
- 삼항 연산자를 사용하여, isLoggedIn이 true일 때는 "Welcome, User!"를, false일 때는 "Please log in"을 렌더링합니다.
4. 논리 연산자
- && 논리 연산자를 사용하여 조건이 참일 때만 렌더링을 할 수 있습니다.
function MyComponent() { const isLoggedIn = true; return ( <div> {isLoggedIn && <h1>Welcome, User!</h1>} </div> ); }
- isLoggedIn이 true일 때만
<h1>Welcome, User!</h1>이 렌더링됩니다. - false일 경우 아무 것도 렌더링되지 않습니다.
50일차 후기
- JSX 안에서는 if 문을 사용할 수 없다는 것이 조금 당황스러웠습니다.
- if문만 사용하다가 삼한 연산자를 사용하려 하니까 순간적으로 막막했습니다.
- 그래도 몇 번 사용해보니까 금방 익숙해지는 것 같습니다.
- 실습을 함께 해보니까 이해가 잘되긴하는데.. 다음에는 괜찮을까요..? ( >д<)
૮꒰ ྀི〃´꒳`〃꒱ა