Front end/React
[ React 기초 ] React 알아보기
_moda
2023. 3. 22. 20:42
React 알아보기
React ?
- 리액트는 자바스크립트 기반의 라이브러리이다.
- 사용자 인터페이스 (UI)를 구축하기 위한 라이브러리로,HTML,CSS등과 함께 사용 되어 웹 애플리케이션을 만드는데 활용된다.
- 리액트에서 모든 UI 요소들은 컴포넌트로 이루어져 있으며, 이러한 컴포넌트들이 결합되어 전체 애플리케이션을 구성한다.
- 주로 자바스크립트 언어와 함께 사용된다.(문법,함수,객체,배열 등과 같은 요소들을 활용하여 리액트 애플리케이션을 구현한다.)
헷갈리지 않을 것 !
- 리액트는 자바스크립트 기반의 라이브러리이지만,자바스크립트 언어 자체의 일부분은 아니며,
자바스크립트 코드를 작성할 때 리액트 라이브러리를 사용하여 필요한 기능을 구현하는 것 입니다.
컴포넌트 ?
- React에서 제일 중요한 부분을 맡고 있다.
- 컴포넌트는 UI를 구성하는 작은 단위로, 재사용 가능하며 독립적으로 동작할 수 있습니다. 리액트에서 모든 UI 요소들은 컴포넌트로 이루어져 있으며, 이러한 컴포넌트들이 결합되어 전체 애플리케이션을 구성한다.
- 컴포넌트를 통해 UI를 모듈화하고, 코드의 가독성과 유지보수성을 향상시킬 수 있다.
- 컴포넌트를 사용하면 UI 상태의 변화에 따른 렌더링 처리도 쉽게 구현할 수 있다.
리액트에서 컴포넌트를 효율적으로 나누는 방법은 뭐가 있을까요 ?
- 기능별로 컴포넌트를 분리하기 컴포넌트는 기능별로 나누는 것이 좋다.
예를 들어, 로그인 폼, 회원가입 폼, 글쓰기 폼 등의 폼 컴포넌트를 만들어서 코드를 재사용할 수 있다.
- 상태 관리에 따른 분리 리액트에서 상태는 컴포넌트마다 다르게 관리된다.
컴포넌트의 상태가 다를 때는 각각의 컴포넌트로 분리하는 것이 좋습니다.
- 레이아웃과 컨텐츠 분리 레이아웃과 컨텐츠를 분리해서 관리하는 것도 중요하다.
레이아웃 컴포넌트는 사이트의 공통된 레이아웃을 담당하고,
컨텐츠 컴포넌트는 레이아웃에 포함되어 실제로 사용자에게 보여지는 컨텐츠를 담당한다.
- 컴포넌트의 재사용성 고려 컴포넌트는 재사용성을 고려해야 한다.
여러 곳에서 사용될 수 있는 컴포넌트를 만들어서 코드의 중복을 줄일 수 있다.
- 단일 책임 원칙(SRP)을 따르기 각 컴포넌트는 하나의 기능 또는 역할만 담당하는 것이 좋다.
SRP를 따르면 코드의 유지보수성이 높아진다.
- 프로퍼티와 상태를 이용한 분리 컴포넌트를 분리할 때는 프로퍼티와 상태를 이용해서 분리하는 것이 좋다.
프로퍼티로 데이터를 전달하고, 상태로 컴포넌트 내부의 데이터를 관리한다.
이렇게 분리하면 컴포넌트의 재사용성이 높아지며, 유지보수성도 높아진다.
이러한 방법들을 고려해서 컴포넌트를 효율적으로 나눌 수 있다.
정리
- 리액트는 자바스크립트를 통해 웹 어플리케이션을 간편하게 만들고, 관리 할 수 있게 해주며 컴포넌트로 구성되어 있다.
- 컴포넌트를 활용하여 UI를 모듈화 하고 코드의 가독성과 유지 보수성을 향상시킨 애플리케이션을 개발할 수 있다.