React 정리

1. JSX (JavaScript XML)

 

• 개념: React에서 JavaScript와 HTML을 결합한 형태로, HTML 문법처럼 보이지만 실제로는 JavaScript 문법입니다. JavaScript 코드에서 HTML처럼 UI를 구성할 수 있게 합니다.

• 사용 이유: JSX는 UI 구조를 정의할 때 직관적으로 작성할 수 있으며, JavaScript와 HTML을 자연스럽게 연결합니다. 코드 가독성이 높아지고 컴포넌트 기반 구조와도 잘 맞습니다.

• 예시:

const name = "React";
const element = <h1>Hello, {name}!</h1>;  // Hello, React!

 

2. 컴포넌트(Component)

 

• 개념: 컴포넌트는 재사용 가능한 UI 단위로, 애플리케이션의 뷰를 구성하는 핵심 요소입니다. 컴포넌트는 각자의 상태와 라이프사이클을 가질 수 있습니다.

• 종류:

• 함수형 컴포넌트: function 키워드나 화살표 함수를 사용해 정의하며, 리액트 훅을 통해 상태와 생명주기 기능을 사용합니다.

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

 

• 클래스형 컴포넌트: ES6 클래스 문법을 사용하며, React의 생명주기 메서드를 활용할 수 있습니다.

class Greeting extends React.Component {
  render() {
    return <h1>Hello!</h1>;
  }
}

 

• 분석 포인트: 컴포넌트의 역할을 파악하는 것, 그리고 각 컴포넌트가 독립적으로 관리하는 상태와 메서드를 통해 어떤 데이터를 제어하는지 확인하는 것이 중요합니다.

 

3. Props (Properties)

 

• 개념: Props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용합니다. 한 번 설정된 props는 자식 컴포넌트 내부에서 변경할 수 없습니다(읽기 전용).

• 사용법: 부모 컴포넌트에서 자식 컴포넌트로 속성 형태로 전달합니다.

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

 

• 구조 분해 할당:

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

 

• 분석 포인트: 컴포넌트가 부모로부터 어떤 데이터를 받고 있으며, 이 데이터를 어떻게 사용하고 있는지 파악하는 것이 중요합니다.

 

4. State (상태)

 

• 개념: 상태는 컴포넌트 내에서 관리되는 동적인 데이터로, 사용자의 인터랙션 등에 따라 변경될 수 있습니다.

• 사용법: 함수형 컴포넌트에서는 useState 훅을 통해 상태를 정의하고, 클래식 컴포넌트에서는 this.state를 사용합니다.

• 예시:

const [count, setCount] = useState(0); // count는 현재 값, setCount는 값을 업데이트하는 함수

 

• 분석 포인트: 상태 값이 변경될 때마다 해당 컴포넌트는 리렌더링됩니다. 특정 컴포넌트가 어떤 상태를 관리하고, 그 상태 변화가 UI에 어떻게 반영되는지 파악하는 것이 중요합니다.

 

5. 훅 (Hooks)

 

• 개념: 함수형 컴포넌트에서 상태와 생명주기 관리가 가능하도록 하는 기능입니다.

• 주요 훅:

• useState: 컴포넌트 내에서 상태를 선언합니다.

• useEffect: 사이드 이펙트 처리를 위해 사용되며, 특정 상태가 변경될 때 실행되는 로직을 작성할 수 있습니다.

• useContext: Context API와 함께 사용되며, 전역적으로 상태를 관리하고 공유할 수 있게 합니다.

• 예시:

useEffect(() => {
  // 실행하고 싶은 코드
}, [dependency]);  // dependency 배열에 명시한 상태가 변할 때마다 실행

 

• 분석 포인트: 특정 컴포넌트가 데이터를 가져오는 시점, DOM 조작을 하는 로직, 그리고 주기적으로 반복 실행되는 로직 등을 찾을 수 있습니다.

 

6. 이벤트 핸들러 (Event Handler)

 

• 개념: 사용자 이벤트를 처리하는 함수로, 주로 버튼 클릭, 폼 제출, 입력 필드 값 변화 등에서 사용됩니다.

• 예시:

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

 

• 분석 포인트: 이벤트 핸들러가 호출되면서 상태를 어떻게 업데이트하는지, UI에 어떤 영향을 미치는지 파악하는 것이 중요합니다.

 

7. 라우팅 (Routing)

 

• 개념: React Router는 SPA에서 각 URL 경로에 맞는 화면을 보여주는 기능을 제공합니다.

• 주요 구성 요소:

• BrowserRouter: 라우팅을 관리하는 최상위 컴포넌트입니다.

• Route: 특정 URL 경로에 맞는 컴포넌트를 렌더링합니다.

• Link: 페이지 이동을 위한 링크 컴포넌트입니다.

• 예시:

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

 

• 분석 포인트: URL에 따른 컴포넌트의 구성을 파악하고, 페이지 이동 흐름을 이해하는 데 유용합니다.

 

8. Context API

 

• 개념: Context API는 props를 사용하지 않고도 컴포넌트 트리 전체에 데이터를 전달할 수 있습니다. 전역적으로 상태를 관리할 때 사용됩니다.

• 사용법:

• createContext로 컨텍스트를 생성하고, Provider로 하위 컴포넌트에 값을 제공합니다.

• useContext 훅을 사용하여 컨텍스트 값을 가져옵니다.

• 예시:

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

 

• 분석 포인트: 전역 데이터가 어떻게 관리되고 공유되는지, 전체 컴포넌트에 걸쳐 필요한 상태를 Context를 통해 공유하고 있는지 파악할 수 있습니다.

 

9. 리덕스 (Redux)

 

• 개념: 전역 상태 관리를 위한 라이브러리로, 복잡한 애플리케이션에서 상태를 쉽게 관리할 수 있습니다.

• 핵심 구성 요소:

• Store: 상태가 저장되는 공간입니다.

• Action: 상태를 변경하는 요청을 나타냅니다.

• Reducer: Action에 따라 상태를 변경하는 함수입니다.

• 분석 포인트: 리덕스를 사용하는 프로젝트에서는 데이터 흐름이 명확하게 규정되어 있어, 데이터가 어떻게 변경되고 어디에서 상태가 업데이트되는지 쉽게 파악할 수 있습니다.

 

10. 비동기 데이터 처리 (API 요청)

 

• 개념: 외부 API와 통신하여 데이터를 가져오고, UI에 반영하는 과정을 처리합니다.

• 주요 라이브러리:

• fetch: 브라우저 내장 API로, 간단한 비동기 요청을 처리합니다.

• axios: HTTP 요청을 더욱 직관적으로 할 수 있게 도와주는 외부 라이브러리입니다.

• 분석 포인트: 비동기 요청이 이루어지는 위치, 데이터가 상태에 반영되는 시점, 에러 처리 방법 등을 파악하는 것이 중요합니다.

 

11. 모듈화와 컴포넌트 구조

 

• 개념: React 프로젝트는 유지보수성과 재사용성을 높이기 위해 컴포넌트를 모듈화하여 관리합니다. 파일과 컴포넌트를 독립적으로 작성해, 필요할 때만 import하여 사용하는 방식입니다.

• 구조 예시:

src/
├── components/      // 독립적인 UI 컴포넌트
│   ├── Header.js
│   ├── Footer.js
│   └── Button.js
├── pages/           // 페이지 단위의 컴포넌트
│   ├── HomePage.js
│   └── AboutPage.js
├── App.js           // 최상위 컴포넌트
└── index.js         // 엔트리 포인트

 

• 분석 포인트: 폴더 구조와 컴포넌트 이름을 통해 프로젝트의 전반적인 구성을 파악할 수 있습니다. 예를 들어 components 폴더는 재사용 가능한 UI 구성 요소를, pages는 페이지별 레이아웃을 포함하는 경우가 많습니다.

 

12. 상태 관리 라이브러리

 

• 개념: 복잡한 애플리케이션에서 여러 컴포넌트가 상태를 공유할 때는 별도의 상태 관리 라이브러리가 유용합니다. 대표적으로 Redux와 MobX가 있으며, Context API를 활용하여 전역 상태를 관리하기도 합니다.

• Redux 예시:

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

 

• 분석 포인트: Redux를 사용하는 경우, 상태가 store에 중앙집중화되어 있기 때문에 상태의 흐름과 변경을 추적하기 쉽습니다. 상태를 관리하는 Action과 Reducer의 역할을 분석하여 데이터가 어떻게 변형되는지 파악할 수 있습니다.

 

13. 에러 처리와 로딩 상태

 

• 개념: API 요청이나 데이터 로딩 시 발생할 수 있는 에러와 로딩 상태를 적절하게 관리하는 것이 사용자 경험에 중요합니다. 보통 useEffect와 useState를 통해 로딩 상태나 에러를 관리합니다.

• 예시:

const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
  fetchData().catch(err => setError(err)).finally(() => setLoading(false));
}, []);

 

• 분석 포인트: 비동기 작업이 진행되는 동안 로딩 스피너를 표시하거나 에러 메시지를 보여주는지 확인해, 사용자 인터페이스의 반응성을 분석할 수 있습니다.

 

14. 최적화

 

• 개념: React에서는 useMemo와 useCallback을 사용하여 불필요한 렌더링을 방지합니다. 이러한 최적화 기법은 성능을 향상시켜 주며, 특히 대규모 컴포넌트 트리에서 유용합니다.

• 주요 최적화 기법:

• useMemo: 연산 비용이 큰 작업의 결과를 캐시해, 필요한 경우에만 계산을 다시 수행합니다.

• useCallback: 함수의 참조를 유지해, 불필요한 재생성을 방지합니다.

• 예시:

const computedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const handleClick = useCallback(() => {
  console.log("Button clicked!");
}, []);

 

• 분석 포인트: 불필요한 렌더링을 줄이기 위한 의도가 있는지 확인하고, useMemo와 useCallback의 사용 여부와 대상 컴포넌트를 파악하여 최적화 의도를 이해할 수 있습니다.

 

15. 애니메이션과 UI 효과

 

• 개념: React에서는 UI 전환, 상태 변경에 따른 시각적 효과를 제공하기 위해 애니메이션 라이브러리를 사용합니다. react-transition-group이나 Framer Motion과 같은 라이브러리가 자주 사용됩니다.

• 주요 라이브러리:

• react-transition-group: 컴포넌트의 마운트/언마운트 시 애니메이션을 쉽게 추가할 수 있습니다.

• Framer Motion: 다양한 애니메이션 효과를 제공하며, 복잡한 UI 전환을 구현할 때 유용합니다.

• 분석 포인트: 사용자와 상호작용할 때 UI가 얼마나 자연스럽게 반응하는지, 사용자 경험을 고려한 애니메이션 효과가 있는지 분석할 수 있습니다.