Hook

학습 목표

이 강의를 통해 Vite를 사용하여 React 프로젝트를 생성하고, Styled Components를 활용하여 동적인 UI를 구현하는 방법을 배웁니다. 컴포넌트 간의 데이터 전달 방식과 Props의 올바른 사용법, 그리고 클래스형 컴포넌트와 함수형 컴포넌트의 차이점을 이해하여 React 개발 역량을 향상시킬 수 있습니다.

핵심 개념

• Vite: 빠르고 효율적인 프론트엔드 빌드 도구로, 개발 서버 시작 및 번들링 속도가 매우 빠릅니다.
• React Profile Card: 사용자 프로필 정보를 표시하는 재사용 가능한 React 컴포넌트입니다.
• Styled Components: JavaScript 코드 내에서 CSS를 작성할 수 있게 해주는 라이브러리로, 동적인 스타일링과 컴포넌트 기반 스타일 관리에 유용합니다.

  import styled from 'styled-components';
  
  const Container = styled.div`
    width: 900px;
    margin: auto;
    padding: 20px;
    border: 1px solid #ccc;
  `;
  

  복사
• Props: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 메커니즘입니다. Props를 개별적으로 전달하는 것이 컴포넌트의 재사용성과 예측 가능성을 높입니다.
• Key Prop: React에서 리스트 렌더링 시 각 항목을 고유하게 식별하는 데 사용됩니다. 성능 최적화에 중요하며, 인덱스 대신 고유 식별자(Primary Key)를 사용하는 것이 좋습니다.
• React Lifecycle: 클래스형 컴포넌트의 생명주기 메서드(예: componentDidMount)와 함수형 컴포넌트에서의 Hooks를 통해 컴포넌트의 생성, 업데이트, 제거 시점에 특정 로직을 실행하는 개념을 이해합니다.

공부 방향성

• 시청 전: React의 기본 개념과 JavaScript에 대한 이해가 있다면 강의를 더 쉽게 따라갈 수 있습니다.
• 시청 중: Vite 프로젝트 생성, Styled Components 적용, Props 전달 방식, Key Prop의 중요성, 클래스형 컴포넌트와 함수형 컴포넌트의 차이점에 집중하여 학습하세요. 코드 예제를 직접 따라 치며 실습하는 것이 중요합니다.
• 시청 후: 배운 내용을 바탕으로 자신만의 프로필 카드 컴포넌트를 만들어 보거나, 다른 컴포넌트에 Styled Components를 적용해보는 연습을 해보세요. React Hooks에 대한 추가 학습으로 이어갈 수 있습니다.