React는 서버에서 실행되는 것도 아니고, 데이터베이스와 직접 연결되는 기술도 아니다.
대신, 최신 웹 애플리케이션에서 동적이고 반응적인 사용자 인터페이스(UI)를 쉽게 만들 수 있게 도와주는 라이브러리다.
특히 선언형(declarative) 방식을 사용해서 개발자가 결과에만 집중할 수 있도록 돕는다.
선언형과 명령형, 뭐가 다를까?
React는 "어떤 상태에서는 어떤 화면이 나와야 하는지"만 정의하면 된다.
반면, 기존의 명령형(imperative) 방식은 화면을 만들기 위해 어떤 과정을 거칠지 하나하나 작성해야 한다.
명령형 방식
- 기존 JavaScript를 쓸 때 사용하는 방식이다.
- 예를 들어 버튼 색깔을 바꾸려면, 버튼을 찾아서, 색깔을 지정하는 과정을 직접 써야 한다.
- 단계가 많고 복잡해질수록 코드가 지저분해지고, 관리하기도 어려워진다.
선언형 방식
- React는 결과만 정의하면 된다. "이 버튼이 클릭되었을 때, 이렇게 보여라" 같은 식으로 작성하면 된다.
- 어떻게 바꿀지는 React가 알아서 처리한다.
- 덕분에 코드가 깔끔하고 유지보수가 쉬워진다.
컴포넌트: React의 기본 단위
React에서는 UI를 컴포넌트(Component)라는 단위로 나눠서 만든다. 컴포넌트는 독립적으로 동작하는 작은 조각이라고 생각하면 된다. 버튼, 입력 창, 사용자 목록 같은 걸 각각 하나의 컴포넌트로 만들 수 있다.
컴포넌트의 장점
- 독립적: 각 컴포넌트는 필요한 데이터와 로직을 스스로 처리한다.
- 재사용 가능: 한 번 만든 컴포넌트를 다른 곳에서도 반복적으로 사용할 수 있다. 예를 들어, 버튼 컴포넌트를 만들어 두면 다른 화면에서도 그대로 쓸 수 있다.
- 구조적 설계: UI를 잘게 나누니까, 애플리케이션이 커져도 관리가 쉬워진다.
예시
사용자 목록을 보여주는 UI를 만든다고 해보자.
- 명령형 방식에서는 사용자를 하나하나 화면에 추가하는 과정을 직접 작성해야 한다.
- 선언형 방식에서는 "이 상태에서는 이 목록을 보여줘"라고 정의만 하면 React가 알아서 그려준다.
React는 이런 선언형 접근과 컴포넌트 기반 개발을 결합해서 복잡한 UI도 쉽게 만들 수 있도록 도와준다. 덕분에 개발자는 더 직관적으로 코드를 작성할 수 있고, 사용자 경험도 더 좋아진다.
1인개발자가 되겠다