[ 문제 ] React , Redux

React , Redux  이해

 

 

리액트(React)란?

리액트는 페이스북에서 개발한 자바스크립트 라이브러리로, **사용자 인터페이스(UI)**를 구축하는 데 사용됩니다. 주로 단일 페이지 애플리케이션(SPA)을 개발하는 데 활용되며, 컴포넌트 기반 구조로 유지보수와 재사용성을 높입니다.

 

리액트의 주요 개념

1. 컴포넌트(Component)

리액트 애플리케이션은 컴포넌트로 구성됩니다. 컴포넌트는 UI의 일부분을 나타내는 독립적인 코드 블록으로, 재사용 가능한 구조입니다. 두 가지 종류의 컴포넌트가 있습니다:

• 함수형 컴포넌트: 단순히 JSX를 반환하는 함수.
• 클래스형 컴포넌트: React.Component를 상속받아 render() 메서드에서 JSX를 반환하는 클래스. (최근에는 함수형 컴포넌트가 더 많이 사용됨)

// 함수형 컴포넌트
function MyComponent() {
  return <h1>Hello, World!</h1>;
}

 

 

2. JSX(JavaScript XML)

리액트는 JSX라는 문법을 사용하여 자바스크립트 코드 내에서 HTML을 작성하는 것처럼 보이게 합니다. JSX는 자바스크립트로 변환되기 때문에 동적인 UI를 쉽게 작성할 수 있습니다.

 

const element = <h1>Hello, World!</h1>;

 

 

3. Props(프로퍼티)

props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 수단입니다. props는 읽기 전용으로, 자식 컴포넌트가 이를 수정할 수 없습니다.

 

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return <Welcome name="Alice" />;
}

 

 

4. State(상태)

state는 컴포넌트 내에서 관리되는 동적인 데이터입니다. 컴포넌트의 상태는 사용자의 입력에 따라 변경될 수 있으며, 상태가 변경되면 리렌더링이 발생합니다. 함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 관리합니다.

 

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

 

 

5. 이벤트 처리

리액트에서 이벤트는 자바스크립트 방식으로 처리되며, 이벤트 핸들러는 자바스크립트 함수로 정의됩니다. JSX에서는 이벤트를 onClick, onChange 등의 속성으로 처리합니다.

 

function handleClick() {
  alert('버튼이 클릭되었습니다.');
}

function App() {
  return <button onClick={handleClick}>Click Me</button>;
}

 

 

6. 조건부 렌더링

리액트에서 조건에 따라 다른 UI를 렌더링할 수 있습니다. if 문이나 삼항 연산자를 이용해 조건부로 컴포넌트를 렌더링합니다.

 

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

 

 

7. 리스트 렌더링

배열을 기반으로 리스트를 렌더링할 수 있으며, 이때 key라는 고유 식별자를 각 요소에 부여해야 효율적인 업데이트가 가능합니다.

 

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>{number}</li>
);

function App() {
  return <ul>{listItems}</ul>;
}

 

 

8. useEffect 훅

useEffect 훅은 함수형 컴포넌트에서 **부수 효과(사이드 이펙트)**를 처리하는 데 사용됩니다. 주로 데이터 가져오기, 구독 설정/해제, DOM 조작 등의 작업에 사용됩니다.

 

import { useEffect, useState } from 'react';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 빈 배열을 전달하면 컴포넌트가 처음 렌더링될 때만 실행

  return <div>{data ? data.title : 'Loading...'}</div>;
}

 

 

상태관리

1. 컨텍스트 API(Context API)

Context는 깊이 중첩된 컴포넌트들 사이에서 값을 전달할 때 유용합니다. 부모에서 자식으로 props를 계속 전달하는 대신, Context를 사용해 전역적으로 값을 전달할 수 있습니다.

 

 

const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <ThemeButton />;
}

function ThemeButton() {
  const theme = useContext(ThemeContext);
  return <button theme={theme}>I am styled by {theme} theme</button>;
}

 

 

2. 리액트 라우터(React Router)

리액트에서 페이지 전환을 관리할 수 있는 라이브러리입니다. react-router-dom을 사용하면, SPA에서 페이지 간 이동을 쉽게 관리할 수 있습니다.

 

 

3. 리덕스(Redux)

리덕스는 리액트 애플리케이션에서 전역 상태를 관리하는 라이브러리입니다. 컴포넌트 간에 상태를 공유하거나 복잡한 상태를 관리할 때 유용합니다.

 

 

리액트의 장점

• 컴포넌트 기반 구조로 인해 재사용성과 유지보수성이 뛰어납니다.
• 가상 DOM을 사용해 실제 DOM과의 상호작용을 최소화하여 성능을 최적화합니다.
• 풍부한 생태계로 많은 라이브러리 및 툴을 이용할 수 있습니다.

리액트의 단점

• 학습 곡선이 다소 높으며, 복잡한 설정이 필요한 경우가 많습니다.
• 상태 관리가 복잡할 수 있으며, 이를 해결하기 위해 리덕스 같은 라이브러리가 필요할 때가 있습니다.

 

문제1. 아래의 결과를 react로 제작 하시오  ( styled-components )

문제2. 아래의 결과를 redux로 제작하시오 ( styled-components )

 

 

 

수정

 

 

완료/진행중