[React] 기초: 특징, 컴포넌트, Props, State

리액트란?

• 정의: UI 개발에 도움을 주는 JavaScript 라이브러리
• 기능: 코드를 통해 컴포넌트를 만들고, 컴포넌트를 조합해 UI를 생성

 

2가지 주요 특징

선언형(Declarative)

• 정의: 원하는 UI 상태를 무엇으로 표현할지 작성하고, 어떻게 렌더링할지는 리액트가 알아서 처리하게 맡기는 방식
  • “어떤 결과를 보여줘야 하는지”에만 집중하고 “어떻게 작업을 수행할지”는 리액트가 알아서 함
  • IoC (Inversion of Control): 렌더링 관리 책임을 리액트에 위임
• 장점
  • 직관적: 결과 중심으로 작성하므로 코드가 간결하고 이해하기 쉬움
  • 자동 업데이트: 상태가 변경되면 리액트가 UI를 자동으로 업데이트하여 일일이 수동으로 조작할 필요 없음

명령형 방식: 요소를 일일이 지정하고 DOM을 작업하는 과정을 직접 지정	선언형 방식 (리액트): 원하는 UI를 표현만 하면 리액트가 해당 요소를 알아서 생성하고 관리

 

 

컴포넌트 기반(Component-Based)

• 정의: UI를 작은 컴포넌트(부품) 단위로 나누고, 이를 조합해서 전체 UI를 만드는 방식
• 장점:
  • 재사용성: 한 번 만든 컴포넌트는 여러 곳에서 반복적으로 사용

 

컴포넌트

 

export와 export default

• 정의/목적: 코드를 다른 파일에서 사용할 수 있도록 하는 것

 

export default

• 하나의 파일에서 주로 사용할 컴포넌트를 내보낼 때 사용
  • 즉, 한 파일에 하나만 사용 가능
• 중괄호 없이 import 가능

 

export

• 한 파일에서 여러 개의 컴포넌트를 내보낼 때 사용
• import 중괄호를 사용

 

 

Props와 State

Props

• 정의: 컴포넌트에 데이터를 전달할 때 사용하는 속성
  • 즉, 부모 컴포넌트가 자식 컴포넌트에게 정보를 전달하는 방법
• 목적: 컴포넌트 재사용을 위해서 사용
• 특징: 변경불가 - 자식 컴포넌트는 전달받은 props를 변경할 수 없음

자식 컴포넌트	부모 컴포넌트

 

 

State

• 정의: 컴포넌트 자체에서 가지고 있는 속성이며 이벤트에 따라 변화시킬 수 있는 값
  
  • 즉,컴포넌트 안에서 변할 수 있는 값
• 목적: 동적인 이벤트 처리를 하기 위해 사용
• 특징:
  • 변경가능 - 이벤트에 따라서 값이 변화됨
  • 리렌더링 - state가 변경되면 컴포넌트가 다시 렌더링됨
  • useState - 함수형 컴포넌트에서는 useState를 사용하여 state를 생성

useState(0): React Hook 중 하나. 초기 값을 0으로 설정해서, count라는 변수를 state로 생성 count: 현재 상태 값을 나타내는 변수 setCount: 이 함수를 통해 count 변수 값을 바꿀 수 있음