44일차[React 컴포넌트 / 정적 & 동적 콘텐츠]

진하의 메모장·2025년 3월 11일

React React 컴포넌트 dynamic static 동적 콘텐츠 복습 자바스크립트 정적 콘텐츠

공부일기

목록 보기

50/66

2025 / 03 / 11

오늘 수업 시간에는 React에서 컴포넌트를 만들고 사용하는 법을 복습했습니다.
정적 콘텐츠와 동적 콘텐츠에 대해 알아보고 값을 넣어보는 시간을 가졌습니다.
아직까지는 캡스톤 때 사용한 React 부분이라 어려운 부분은 없고 괜찮은 것 같습니다.

💌 컴포넌트

애플리케이션을 구성하는 기본적인 UI 단위입니다.

컴포넌트를 사용하면 애플리케이션의 UI를 독립적인 부분으로 나누어 관리하고, 재사용할 수 있어 개발 효율성과 유지보수성을 크게 향상시킬 수 있습니다.

1. 특징

독립적인 UI 블록

컴포넌트는 애플리케이션의 화면의 독립적인 부분입니다.

각 화면을 구성하는 다양한 요소를 하나의 단위로 묶어서 관리할 수 있습니다.

재사용 가능

한 번 정의된 컴포넌트는 여러 곳에서 재사용이 가능합니다.

같은 UI를 여러 번 사용해야 할 때 유용합니다.

구성 요소

컴포넌트는 함수형 컴포넌트 또는 클래스형 컴포넌트로 정의할 수 있습니다.

최근에는 함수형 컴포넌트가 주로 사용됩니다.

자기 포함성

컴포넌트 내부에서 사용할 데이터를 props(속성) 또는 state(상태)로 전달받아 UI를 동적으로 변화시킬 수 있습니다.

2. 컴포넌트 구조

컴포넌트는 함수로 정의되며, JSX를 반환하여 화면에 렌더링됩니다.
JSX는 자바스크립트 코드 안에서 HTML처럼 보이는 문법을 사용할 수 있게 해주는 문법입니다.

3. 컴포넌트 예시

아래의 코드는 컴포넌트를 사용한 예시입니다.

import "./App.css";

function MainGoal() {
   return (
      <div>
         <p className="main-goal">
            <strong>중요:</strong> &quot; 벨로그 작성 &quot; 미루지 않기
         </p>
      </div>
   );
}

function FirstInfo() {
   return (
      <div>
         <p>
            <code>나의 첫번째 목표</code> 포켓몬 카드 뽑기
         </p>
      </div>
   );
}

function SecondInfo() {
   return (
      <div>
         <p>
            <code>나의 두번째 목표</code> 수업 시간에 배운 내용 이해하기
            <br />
            (수업 내용이 어려운거 같아요.)
         </p>
      </div>
   );
}

function ThridInfo() {
   return (
      <div>
         <p>
            <code>나의 세번째 목표</code> 수면 패턴 회복하기
         </p>
      </div>
   );
}

function App() {
   return (
      <div id="app">
         <h1>오늘의 목표</h1>
         <FirstInfo />
         <SecondInfo />
         <ThridInfo />
         <MainGoal />
      </div>
   );
}

export default App;

4. 사용하는 이유

재사용성

컴포넌트를 재사용할 수 있어 코드 중복을 줄일 수 있습니다.

예를 들어, 위에서 사용한 MainGoal이나 FirstInfo 컴포넌트는 여러 번 사용할 수 있습니다.

유지보수성

각 UI 부분을 컴포넌트로 나누어 관리하면 수정이 간편합니다.

목표 내용이나 스타일을 변경할 때, 해당 컴포넌트만 수정하면 됩니다.

독립성

컴포넌트는 독립적으로 개발되고, 다른 컴포넌트와 연결되어 동작합니다.

다른 컴포넌트에 영향을 미치지 않으므로 버그를 추적하고 수정하는 데 유리합니다.

💌 정적 콘텐츠

Static Content

변경되지 않는 콘텐츠를 의미합니다.

웹 페이지를 로드할 때 한 번 작성된 내용은 런타임 동안 변경되지 않습니다.

1. 특징

1) 변경되지 않음

처음 작성될 때 그 내용이 고정되어 있습니다.

사용자가 웹 페이지를 새로 고침하지 않는 이상 변경되지 않습니다.

2) 서버에서 직접 전달

서버에서 파일로 직접 전달되어 브라우저에서 그대로 표시됩니다.

💌 동적 콘텐츠

Dynamic Content

런타임에 변경되는 콘텐츠를 의미합니다.

사용자의 행동이나 외부 데이터에 따라 웹페이지의 내용이 달라집니다.

ex) 사용자가 입력한 정보, 서버에서 받아온 데이터에 기반한 콘텐츠, 혹은 날짜나 시간에 따라 바뀌는 콘텐츠 등이 동적 콘텐츠에 해당합니다.

1. 특징

1) 실시간 변경

사용자의 상호작용이나 서버와의 통신에 의해 실시간으로 변경됩니다.

2) 데이터 기반

종종 외부 데이터베이스나 API에서 가져온 데이터를 기반으로 만들어집니다.

💌 사용 예시

해당 코드는 동적 콘텐츠를 처리하는 예시를 보여줍니다.

import "./App.css";
import mainImg from "./assets/image.png";

const activity = ["운동하기", "책읽기", "코딩 연습"];

function getRandomInt(max) {
   return Math.floor(Math.random() * (max + 1));
}

function App() {
   const getActivity = activity[getRandomInt(activity.length - 1)];

   return (
      <div>
         <p>랜덤 추천 활동</p>

         {/* html 태그 안에 자바스크립트 변수를 넣는 방법 */}
         <div>오늘의 추천 활동 {getActivity}</div>
         <img src={mainImg} />
      </div>
   );
}

export default App;

랜덤 추천 활동

activity 배열에 저장된 내용 중에서 랜덤으로 선택하여 출력하는 부분이 동적 콘텐츠입니다.
getRandomInt( ) 함수는 0부터 activity.length - 1까지의 정수를 랜덤으로 반환합니다.
그 값과 같은 인덱스에 해당하는 추천 활동을 선택합니다.
추천 활동은 웹 페이지를 새로 고침하거나 앱을 로드할 때마다 실시간으로 변경됩니다.
페이지가 로드될 때마다 동적으로 콘텐츠가 결정되는 것이 동적 콘텐츠의 특징입니다.

이미지

<img src={mainImg} />는 정적 콘텐츠의 예시입니다.
이미지 파일(mainImg)은 변경되지 않으며, 페이지 로드 시 고정된 이미지를 불러옵니다.
이 이미지는 정적 콘텐츠로 간주할 수 있습니다.

44일차 후기

정적 콘텐츠와 동적 콘텐츠의 차이를 알고 실습도 해봐서 좋았습니다.

자바스크립트에서 동적으로 값을 받아오는 것과 비슷해서 어렵지는 않았습니다.

컴포넌트에 대해 다시 한 번 내용을 정리하고 이해할 수 있었습니다.

실습을 하면서 import와 export를 다시 사용해봤는데.. import를 적어야 하는데 자연스럽게 계속 export 적게 되는 것 같습니다. ˚‧º·(˃̣̣̥˓̭˂̣̣̥)‧º·˚

오류 띄우면 혼자서 놀라고.. 고치고를 반복하는데 언젠가.. 익숙해지겠죠? ( ˘ •ω• ˘ )