REACT의 기본구조와 스타일링

React 기본 구조와 스타일링

1. React의 기본 개념

 

주요 개념 설명
- 컴포넌트 기반 아키텍처: React는 컴포넌트를 사용하여 UI를 만들고 관리합니다. 각 컴포넌트는 독립적이고 재사용 가능한 코드 블록이며, 다른 컴포넌트와 조합하여 전체 애플리케이션의 UI를 구성합니다.
- UI 선언적 접근: React는 선언적(Declarative) 방식으로 UI를 정의합니다. 즉, UI가 특정 상태에 대해 어떻게 보여야 하는지를 선언적으로 작성하고, React가 이를 렌더링하고 관리하게 합니다.

사용 시나리오
- 컴포넌트 기반 아키텍처는 애플리케이션의 복잡성을 줄여주며, 특히 재사용 가능한 컴포넌트를 개발할 때 유용합니다. 예를 들어, 버튼, 카드, 모달 창과 같은 UI 요소는 개별 컴포넌트로 만들고, 여러 곳에서 쉽게 재사용할 수 있습니다.
- 선언적 UI는 상태에 따라 UI가 동적으로 업데이트되어야 하는 웹 애플리케이션에서 유용합니다. 사용자 인터랙션이 많고, 실시간 데이터가 필요한 애플리케이션에 적합합니다.

예시 코드

import React from 'react';

function Greeting({ name }) {
    return <h1>Hello, {name}!</h1>;
}

function App() {
    return (
        <div>
            <Greeting name="Danbi" />
            <Greeting name="Frontend Developer" />
        </div>
    );
}

export default App;

---

2. JSX의 역할과 기본 문법

 

 주요 개념 설명
- JSX : React에서 사용하는 JavaScript XML의 줄임말로, JavaScript 코드 안에서 HTML 태그를 사용할 수 있는 문법입니다. HTML과 비슷해 보이지만, 실제로는 JavaScript 코드를 사용하여 UI를 선언적으로 작성할 수 있도록 도와줍니다.
- 컴파일: JSX는 JavaScript 코드로 컴파일됩니다. 따라서 브라우저에서 직접 JSX를 이해하지 못하므로, `Babel`과 같은 컴파일러가 이를 변환해 줍니다.

사용 시나리오
- JSX는 HTML과 유사한 문법으로 UI를 작성할 수 있어 코드의 가독성을 높이고, JavaScript의 모든 기능을 활용할 수 있게 합니다. 예를 들어, 조건부 렌더링과 반복 렌더링을 쉽게 수행할 수 있습니다.

예시 코드

import React from 'react';

function App() {
    const isLoggedIn = true;
    return (
        <div>
            <h1>Welcome to React!</h1>
            {isLoggedIn ? <p>Logged In</p> : <p>Please Log In</p>}
        </div>
    );
}

export default App;

 

---

 3. 스타일링 기법
React에서 스타일링을 적용하는 방법은 여러 가지가 있습니다. 여기에서는 CSS 모듈, Styled Components, CSS-in-JS 방식에 대해 살펴보겠습니다.

3.1 CSS 모듈
- 설명: CSS 모듈은 각 컴포넌트의 스타일을 모듈화하여, 클래스명이 충돌하지 않도록 합니다. 파일명을 `.module.css`로 하면, 해당 CSS 파일이 모듈로 인식됩니다.
- 사용 시나리오: 전통적인 CSS 방식과 비슷하지만, 글로벌 CSS 네임스페이스 문제를 해결하는 데 유용합니다.

예시 코드

css

/* App.module.css */
.title {
    color: blue;
    font-size: 24px;
}

import React from 'react';
import styles from './App.module.css';

function App() {
    return <h1 className={styles.title}>Hello, CSS Module!</h1>;
}

export default App;

3.2 Styled Components
- 설명: Styled Components는 CSS-in-JS 방식으로, JavaScript 파일 안에서 스타일을 정의합니다. 컴포넌트 단위로 스타일을 작성하며, 컴포넌트가 마치 스타일을 포함하는 것처럼 사용됩니다.
- 사용 시나리오: 동적인 스타일링이 필요한 경우, 특히 props를 사용해 조건부 스타일을 적용할 때 유용합니다.

예시 코드

import React from 'react';
import styled from 'styled-components';

const Title = styled.h1`
    color: ${props => (props.primary ? 'blue' : 'black')};
    font-size: 24px;
`;

function App() {
    return <Title primary>Hello, Styled Components!</Title>;
}

export default App;

3.3 CSS-in-JS
- 설명 : CSS-in-JS는 JavaScript 내에서 CSS를 작성하는 방식으로, 스타일을 컴포넌트와 함께 관리할 수 있어 유지보수가 용이합니다.
- 사용 시나리오: 글로벌 스타일링을 피하고 컴포넌트 기반 스타일링이 필요할 때 사용합니다.