AI가 정리해준 리액트

1. 리액트란 무엇인가요?

• 리액트(React)는 페이스북에서 개발한 자바스크립트 라이브러리입니다.
• 사용자 인터페이스(UI)를 만들기 위한 라이브러리로, 컴포넌트 기반으로 동작합니다.
• 가상 돔(Virtual DOM)을 사용하여 성능을 최적화하고, 단방향 데이터 흐름을 따르는 특징이 있습니다.

1. 리액트의 컴포넌트란 무엇인가요?

• 리액트에서 UI를 구성하는 기본 단위입니다.
• 컴포넌트는 독립적이고 재사용 가능하며, 다른 컴포넌트와 조합하여 사용할 수 있습니다.
• 함수형 컴포넌트와 클래스형 컴포넌트로 구성됩니다.

1. JSX란 무엇인가요?

• JSX는 자바스크립트와 HTML을 혼합한 문법으로, 리액트에서 컴포넌트를 만들 때 사용됩니다.
• JSX는 브라우저에서 직접 실행되지 않으며, 바벨(Babel)과 같은 트랜스파일러를 사용하여 자바스크립트로 변환됩니다.

1. 상태(State)와 속성(Props)의 차이점은 무엇인가요?

• 상태는 컴포넌트 내에서 변경될 수 있는 값으로, 컴포넌트 내부에서 관리됩니다.
• 속성은 부모 컴포넌트로부터 전달되는 값으로, 컴포넌트 내부에서 변경할 수 없습니다.

1. 리액트에서 상태를 관리하는 방법은 무엇인가요?

• 클래스형 컴포넌트에서는 state 객체를 사용하여 상태를 관리합니다.
• 함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 관리합니다.

1. 리액트에서 이벤트 처리하는 방법은 무엇인가요?

• 이벤트 처리는 onClick, onChange 등의 이벤트 핸들러를 등록하여 처리합니다.
• 클래스형 컴포넌트에서는 이벤트 핸들러를 메서드로 정의하고, 함수형 컴포넌트에서는 이벤트 핸들러를 콜백 함수로 전달합니다.

1. 리액트에서 조건부 렌더링을 하려면 어떻게 해야 하나요?

• 조건부 렌더링은 특정 조건에 따라 다른 결과를 보여주는 것을 말합니다.
• if문이나 삼항 연산자, && 연산자를 사용하여 조건부 렌더링을 구현할 수 있습니다.
• 예를 들어, 다음과 같은 코드는 isLoggedIn이 true일 때 "로그인 되었습니다"를, false일 때 "로그인이 필요합니다"를 출력합니다.

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>로그인 되었습니다</h1>;
  }
  return <h1>로그인이 필요합니다</h1>;
}

 

1. 리액트에서 반복문을 사용하는 방법은 무엇인가요?

• 반복문은 map() 함수를 사용하여 구현할 수 있습니다.
• 예를 들어, 다음과 같은 코드는 numbers 배열을 반복하면서 각 항목을 제곱하여 새로운 배열을 생성합니다.

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((number) => number * number);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

• 이렇게 생성된 배열을 JSX에서 사용할 때는 중괄호({})로 감싸서 출력합니다.

1. 리액트에서 스타일을 적용하는 방법은 무엇인가요?

• 스타일을 적용할 때는 인라인 스타일, CSS 모듈, styled-components 등의 방법을 사용할 수 있습니다.
• 인라인 스타일은 객체 형태로 스타일을 정의하여 JSX 요소의 style 속성에 전달합니다.
• CSS 모듈은 CSS 파일을 모듈화하여 클래스 이름을 자동으로 생성하고, JSX 요소의 className 속성에 해당 클래스 이름을 전달하여 스타일을 적용합니다.
• styled-components는 JS 파일에서 CSS를 작성하여 컴포넌트와 함께 사용할 수 있도록 해줍니다.

 

1. 리액트에서 라우팅을 구현하는 방법은 무엇인가요?

• 라우팅은 URL 경로에 따라 다른 컴포넌트를 렌더링하는 것을 말합니다.
• 리액트에서 라우팅을 구현할 때는 react-router-dom 라이브러리를 사용합니다.
• BrowserRouter, Route, Link 등의 컴포넌트를 사용하여 라우팅을 구현할 수 있습니다.
• 예를 들어, 다음과 같은 코드는 "/" 경로로 접근할 때 Home 컴포넌트를, "/about" 경로로 접근할 때 About 컴포넌트를 렌더링합니다.

import { BrowserRouter, Route, Link } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </BrowserRouter>
  );
}

function Home() {
  return <h1>홈 페이지</h1>;
}

function About() {
  return <h1>소개 페이지</h1>;
}

 

1. 리액트에서 상태(state)를 관리하는 방법은 무엇인가요?

• 상태 관리를 위해 useState 훅을 사용할 수 있습니다.
• useState 훅은 상태값과 그 상태를 변경하는 함수를 반환합니다.
• 예를 들어, 다음과 같은 코드는 count 상태값과 setCount 함수를 정의하고, 버튼을 클릭할 때마다 count 상태값이 1씩 증가합니다.

import React, { useState } from "react";

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

  const handleClick = () => {
    setCount(count + 1);
  };

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

 

1. 리액트에서 부모 컴포넌트와 자식 컴포넌트 간에 데이터를 전달하는 방법은 무엇인가요?

• 부모 컴포넌트에서 props를 통해 자식 컴포넌트에 데이터를 전달할 수 있습니다.
• 자식 컴포넌트에서는 props를 받아와 사용합니다.
• 예를 들어, 다음과 같은 코드는 name이라는 props를 Hello 컴포넌트에 전달하고, Hello 컴포넌트에서 props를 받아와 사용합니다.

function Hello(props) {
  return <div>Hello, {props.name}!</div>;
}

function App() {
  return <Hello name="React" />;
}

1. 리액트에서 이벤트 처리를 어떻게 할 수 있나요?

• 이벤트 처리를 위해 onClick, onChange, onSubmit 등의 이벤트 핸들러를 사용할 수 있습니다.
• 이벤트 핸들러는 함수 형태로 정의되며, 이벤트가 발생했을 때 실행됩니다.
• 예를 들어, 다음과 같은 코드는 버튼을 클릭했을 때 handleClick 함수가 실행됩니다.

function handleClick() {
  console.log("Button clicked");
}

function Button() {
  return <button onClick={handleClick}>Click me</button>;
}

1. 리액트에서 API를 호출하는 방법은

• API를 호출하기 위해 fetch, axios 등의 라이브러리를 사용할 수 있습니다.
• fetch는 브라우저 내장 API로, 네트워크 요청을 보내고 응답을 받아올 수 있습니다.
• axios는 브라우저와 Node.js에서 사용할 수 있는 라이브러리로, HTTP 요청을 보내고 응답을 받아올 수 있습니다.
• 예를 들어, 다음과 같은 코드는 fetch를 사용하여 API를 호출하고, 응답 데이터를 JSON 형태로 파싱합니다.

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

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

1. 리액트에서 컴포넌트 스타일링을 어떻게 할 수 있나요?

• 컴포넌트 스타일링을 위해 CSS, Sass, styled-components 등의 방법을 사용할 수 있습니다.
• CSS를 사용하는 경우, className을 사용하여 스타일을 적용할 클래스 이름을 지정합니다.
• Sass를 사용하는 경우, node-sass 패키지를 설치하고 .scss 파일을 작성하여 사용합니다.
• styled-components는 CSS-in-JS 라이브러리로, 컴포넌트 자체에 스타일을 정의합니다.
• 예를 들어, 다음과 같은 코드는 styled-components를 사용하여 Button 컴포넌트에 스타일을 적용합니다.

 

 

import styled from "styled-components";

const Button = styled.button`
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 16px;
  padding: 10px;
`;

function App() {
  return <Button>Click me</Button>;
}

 

1. 리액트에서 컴포넌트를 테스트하는 방법은 무엇인가요?

• 컴포넌트를 테스트하기 위해 Jest와 Enzyme 등의 라이브러리를 사용할 수 있습니다.
• Jest는 테스트 프레임워크로, 테스트 코드를 작성하고 실행할 수 있습니다.
• Enzyme은 리액트 컴포넌트를 테스트하기 위한 유틸리티 라이브러리로, 컴포넌트의 렌더링 결과를 검증할 수 있습니다.
• 예를 들어, 다음과 같은 코드는 Jest와 Enzyme을 사용하여 Button 컴포넌트를 테스트합니다.

import React from "react";
import { shallow } from "enzyme";
import Button from "./Button";

describe("<Button />", () => {
  it{
const wrapper = shallow(<Button>Click me</Button>);
expect(wrapper.text()).toBe("Click me");
expect(wrapper.hasClass("button")).toBe(true);
});
}

 

• 위 코드에서 shallow 함수는 Button 컴포넌트를 렌더링하고, wrapper 객체를 반환합니다.
• wrapper 객체의 text 메서드는 렌더링된 결과의 텍스트를 반환하며, toBe 메서드를 사용하여 텍스트가 "Click me"인지 검증합니다.
• wrapper 객체의 hasClass 메서드는 지정한 클래스 이름을 가지고 있는지 검증합니다.

1. 리액트에서 라우팅을 구현하는 방법은 무엇인가요?

• 라우팅을 구현하기 위해 react-router-dom 라이브러리를 사용할 수 있습니다.
• BrowserRouter 컴포넌트를 사용하여 라우터를 설정하고, Route 컴포넌트를 사용하여 경로와 컴포넌트를 연결합니다.
• Link 컴포넌트를 사용하여 다른 경로로 이동할 수 있는 링크를 생성할 수 있습니다.
• 예를 들어, 다음과 같은 코드는 react-router-dom을 사용하여 라우팅을 구현합니다.

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </div>
    </Router>
  );
}

1. 리액트에서 컴포넌트 간 상태를 공유하는 방법은 무엇인가요?

• 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하여 상태를 공유할 수 있습니다.
• 하지만 컴포넌트 구조가 복잡해지면 props를 전달하기 번거로워지고, 중간에 있는 컴포넌트에서는 상태를 사용하지 않는 경우도 있어서 효율적이지 않을 수 있습니다.
• 이 때문에 리액트는 Context API를 제공합니다.
• Context API를 사용하면 부모 컴포넌트에서 생성한 상태를 자식 컴포넌트에서 직접 사용할 수 있습니다.
• 예를 들어, 다음과 같은 코드는 Context API를 사용하여 상태를 공유합니다.

 

 

 

 

 

 

 

추천 블로그

1. React 공식 문서: https://ko.reactjs.org/docs/getting-started.html React를 공부하는 가장 좋은 방법은 React 공식 문서를 읽는 것입니다. React의 기본 개념부터 심화 내용까지 자세히 설명되어 있습니다.
2. Velopert 블로그: https://velog.io/@velopert Velopert님의 블로그는 React를 비롯한 프론트엔드 기술에 대한 튜토리얼과 팁을 다루고 있습니다. 특히, React의 기본 개념을 다루는 '리액트를 다루는 기술' 시리즈는 추천합니다.
3. ZeroCho TV: https://www.zerocho.com/category/React ZeroCho님의 블로그와 유튜브 채널에서는 React를 비롯한 프론트엔드 기술에 대한 튜토리얼과 강의를 제공하고 있습니다. 초보자부터 심화까지 다양한 내용이 다루어지고 있습니다.

import { createContext, useState, useContext } from "react";

const CountContext = createContext();

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

  return (
    <CountContext.Provider value={{ count, setCount }}>
      <div>
        <p>Count: {count}</p>
        <ChildComponent />
      </div>
    </CountContext.Provider>
  );
}

function ChildComponent() {
  const { count, setCount } = useContext(CountContext);

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

• 이 때, createContext 함수를 사용하여 CountContext라는 새로운 컨텍스트를 생성합니다.
• useState 훅을 사용하여 count 상태와 setCount 함수를 생성합니다.
• CountContext.Provider 컴포넌트를 사용하여 count 상태와 setCount 함수를 자식 컴포넌트에게 전달합니다.
• useContext 훅을 사용하여 자식 컴포넌트에서 CountContext를 가져옵니다.
• 이렇게 가져온 CountContext를 사용하여 count 상태와 setCount 함수를 직접 사용할 수 있습니다.
• 예를 들어, 다음과 같은 코드는 CountContext를 사용하여 상태를 공유합니다.
• 이 코드에서 CountContext를 사용하여 count 상태와 setCount 함수를 공유합니다.
• 부모 컴포넌트인 App에서 CountContext.Provider를 사용하여 count 상태와 setCount 함수를 자식 컴포넌트에게 전달합니다.
• 자식 컴포넌트인 ChildComponent에서 useContext 훅을 사용하여 CountContext를 가져온 후 count 상태와 setCount 함수를 사용합니다.
• 이렇게 하면 중간에 있는 컴포넌트에서도 상태를 사용할 수 있고, props를 전달하는 것보다 간편하게 상태를 공유할 수 있습니다.