1007 TIL-C

조건부 렌더링 적용.

React에서 조건부 렌더링을 구현해봤다. 특정 조건에 따라 컴포넌트를 렌더링하거나 숨길 수 있는 기능은 사용자 경험을 향상시키는 데 매우 유용. 특히, 페이지에 따라 다른 레이아웃을 제공할 때 유용하다.

강의 들을때 조건부렌더링 관련해서 학습해봤기에, 직접 사용해봤다.

오늘 있었던 일!!!

고객센터 페이지와 메인 콘텐츠 분리하기

오늘 프로젝트에서 고객센터 페이지를 구현하면서, 메인 콘텐츠가 필요 없는 경우에 조건부 렌더링을 적용했다. 아래는 그 과정에서 사용한 코드

import React from 'react';
import styled from 'styled-components';
import { BrowserRouter as Router, Route, Routes, useLocation } from 'react-router-dom';
import Header from './components/Header';
import Banner from './components/Banner';
import MainContent from './components/MainContent';
import Footer from './components/Footer';
import CustomerService from './components/CustomerService';

const App: React.FC = () => {
  return (
    <Router>
      <Container>
        <Header />
        <Content />
        <Footer />
      </Container>
    </Router>
  );
};

const Content: React.FC = () => {
  const location = useLocation();

  return (
    <>
      {location.pathname === '/' && <Banner />} {/* 메인 페이지에서만 배너 표시 */}
      <Routes>
        <Route path="/" element={<MainContent />} />
        <Route path="/customer-service" element={<CustomerService />} />
        {/* 다른 경로 추가 */}
      </Routes>
    </>
  );
};

const Container = styled.div`
  font-family: Arial, sans-serif;
`;

export default App;

useLocation 훅: 현재의 URL 경로를 가져오는 데 사용.
조건부 렌더링: location.pathname이 '/'일 때만 MainContent와 Banner를 렌더링하여, 고객센터와 같은 다른 페이지에서는 해당 콘텐츠가 표시되지 않도록 설정했다.

이렇게 조건부 렌더링을 적용함으로써, 사용자가 고객센터 페이지로 이동할 때 메인 콘텐츠가 사라지고, 오직 고객센터 컴포넌트만 표시된다. 이를 통해 사용자 경험이 개선됨.

그래서!!!!!!

React에서 조건부 렌더링을 활용하면 페이지의 구조를 유연하게 조정할 수 있어 사용자에게 더 나은 경험을 제공할 수 있습니다. 앞으로도 다양한 조건부 렌더링 기법을 활용예정

Learned

조건부렌더링! 배웠던걸 바탕으로 실제 사용해보니, 좋다. 좋다라는 표현이 이상한데, 그냥 음 어 아 훔,,

한 섹션의 강의를 들을때 생각보다 꽤 긴시간 강의를 듣는다. 이걸 벨로그에 작성하고, 또 주말에 가고 이 상황이 단순해보일수 있지만 학습하는 사람입장에선, 편하다고 할수만은 없다. 강의를 듣고, 메모를 하고, 정리를 하고, 질문거리를 만들고, 이 질문이 형편없으면 어쩌나 하면서 수정하고, 이들을 바탕으로 벨로그를 작성한다. 또 써놓고 보니 간단하네. 요즘은 익숙해져서 괜찮다.

물론, 나에게 가르침을 주시는 분도, 힘드시지. 당연하다. 누가 주말에 나오고 싶겠는가. 그냥 요즘 드는 생각은 내가 당연히 열심히 해야지! 이지만, 죄송하다는 생각이 더많이 든다. 고생해주시는 만큼 더 열심히 하겠습니당!

그래서 최대한 지난주보다 살짝이라도 달라진 부분을 보여드리려고, 음 내 기준 한뼘씩 성장하지만, 그렇게 안보이실수 있다. 설마, 잠깐만 그러면 너무 슬플거 같은데, ANYWAY

나름 노력한다곤 했지만, 내가 어떻게 평일에 잘 일궈서, 표현을 해내는지를 빨리 보여드리고 싶었다!!!!!!(자정 아닌데 느낌표 나온거보면 지금 기분이 너무 좋당)

배운걸 직접 해보다니, 내가 생각한 학습의 의미이자, 기본이다.

앞으로 이 플젝에서 다양한 도전? 실습을 해낼텐데, 내가 배웠던거, 꼭 살려낼것이다. 그게 내가 말한 학습이자 성장이니.

끝!

오늘 8갤만에 언니네 가족이 일본에서 온다! 언니가 자기 보고 싶냐고 물어봤지만,
어쩌지 난 유안이가 더 보고 싶은뎅
이번주는 언니와 함께 있을것 같다. 럭키비키🍀🍀🍀🍀 일요일이 안왔으면 좋겠다.