프로그래밍을 조금 하다 보면 정말 자주 보게 되는 이름이 있다. 바로 React다. 개발자 채용 공고를 봐도 React, 유튜브 강의를 봐도 React, 웹사이트 만드는 방법을 찾아봐도 React가 나온다.
처음에는 나도 “왜 다들 React를 쓰지?”라는 생각이 들었다. JavaScript만으로도 버튼 만들고, 메뉴 열고, 글자 바꾸는 건 할 수 있는데 굳이 또 새로운 걸 배워야 하나 싶었다.
그런데 직접 작은 웹사이트를 만들어보니 이유를 알게 됐다. 처음에는 코드가 몇 줄 안 돼서 괜찮다. 하지만 페이지가 여러 개가 되고, 버튼이 많아지고, 로그인이나 장바구니 같은 기능이 들어가기 시작하면 코드가 금방 복잡해진다.
React는 바로 그런 순간에 등장한다. 복잡해진 웹사이트를 훨씬 쉽게 만들고 관리할 수 있게 도와주는 도구다.
React는 정확히 무엇일까
React는 JavaScript로 웹사이트 화면을 만들기 쉽게 도와주는 도구다. 정확히는 ‘라이브러리’지만, 실제로는 프레임워크처럼 사용하는 경우가 많다.
React를 사용하면 웹사이트를 작은 조각으로 나눠서 만들 수 있다.
예를 들어 쇼핑몰 화면을 만든다고 해보자.
- 상단 메뉴
- 검색창
- 상품 카드
- 장바구니 버튼
- 하단 메뉴
보통 JavaScript만 사용하면 이것들을 한 파일 안에 모두 넣게 된다. 하지만 React에서는 각각을 따로 만들 수 있다.
예를 들어:
- Header 컴포넌트
- Search 컴포넌트
- Product 컴포넌트
- CartButton 컴포넌트
처럼 나누어서 만든다.
이런 작은 조각을 React에서는 컴포넌트라고 부른다.
즉, React는 웹사이트를 레고 블록처럼 조립해서 만들게 해주는 도구다.
왜 그냥 JavaScript로 만들면 안 될까
물론 가능하다. 간단한 웹사이트라면 JavaScript만으로도 충분하다.
예를 들어 버튼을 누르면 글자가 바뀌는 정도는 JavaScript만으로 쉽게 만들 수 있다.
하지만 웹사이트가 조금만 커져도 문제가 생긴다.
예를 들어 로그인 기능, 댓글, 검색, 장바구니, 다크모드까지 들어간다고 해보자. 그러면 JavaScript 코드가 여기저기 흩어지고, 어느 부분이 어디에 영향을 주는지 찾기 어려워진다.
나도 처음에는 그냥 JavaScript만으로 만들다가, 버튼 하나를 수정했는데 왜인지 다른 화면까지 같이 망가진 적이 있었다. 코드가 한곳에 정리되어 있지 않으니까 나중에는 내가 쓴 코드도 다시 이해하기 힘들었다.
React는 이런 문제를 줄여준다.
왜냐하면 각 기능을 따로 나눠서 만들 수 있기 때문이다.
예를 들어 상품 카드에 문제가 생기면 Product 컴포넌트만 보면 된다. 로그인 버튼이 이상하면 Login 컴포넌트만 수정하면 된다.
그래서 웹사이트가 커질수록 React가 훨씬 편하다.
React가 많이 쓰이는 가장 큰 이유는 ‘재사용’이다
React의 가장 큰 장점 중 하나는 같은 코드를 여러 번 다시 사용할 수 있다는 점이다.
예를 들어 웹사이트에 “구매하기” 버튼이 10개 있다고 해보자. JavaScript만 사용하면 버튼 10개를 각각 만들어야 할 수도 있다.
하지만 React에서는 버튼 컴포넌트를 한 번만 만들어두면 된다.
그리고 필요한 곳마다 가져다 쓰면 된다.
즉:
<Button text="구매하기" />
처럼 여러 번 사용할 수 있다.
그래서 나중에 버튼 색이나 모양을 바꾸고 싶다면, 버튼 컴포넌트 하나만 수정하면 전체 버튼이 한 번에 바뀐다.
처음에는 별 차이 없어 보이지만, 웹사이트가 커질수록 이 차이가 엄청 커진다.
React는 화면이 빠르게 바뀐다
React가 인기 있는 또 다른 이유는 화면을 빠르게 바꿀 수 있기 때문이다.
예를 들어 좋아요 버튼을 눌렀다고 해보자.
예전 방식이라면 페이지 전체를 다시 불러와야 했다. 그러면 화면이 잠깐 깜빡이거나 느려질 수 있다.
하지만 React는 필요한 부분만 바꾼다.
예를 들어:
- 좋아요 숫자만 바꾸기
- 버튼 색만 바꾸기
- 댓글 하나만 추가하기
처럼 화면 전체가 아니라, 바뀐 부분만 다시 보여준다.
그래서 React로 만든 웹사이트는 더 부드럽고 빠르게 느껴진다.
우리가 자주 사용하는 서비스들 중에도 이런 방식이 많다. 예를 들어 SNS에서 좋아요를 누르면 페이지 전체가 새로고침되지 않고 숫자만 바로 바뀌는데, 이런 느낌을 React가 잘 만들어준다.
그래서 어떤 회사들이 React를 사용할까
React는 원래 Facebook이 만든 도구다. 그래서 Facebook과 Instagram은 물론이고, 정말 많은 회사들이 React를 사용한다.
대표적으로:
- Netflix
- Airbnb
- Discord
- Notion
같은 서비스들이 React를 사용한다.
그래서 React를 배우면, 실제 회사에서 쓰는 방식과 비슷한 구조를 익힐 수 있다.
또 React는 사용하는 사람이 많기 때문에, 검색하면 거의 모든 문제가 나온다. 오류가 나더라도 구글이나 유튜브에 검색하면 해결 방법을 쉽게 찾을 수 있다.
이 점도 초보자에게 꽤 큰 장점이다.
React가 어렵다고 느껴지는 이유
물론 React가 처음부터 쉬운 것은 아니다.
처음 보면 이런 것들이 헷갈린다.
- 컴포넌트
- props
- state
- useEffect
그리고 HTML처럼 보이는데 JavaScript 안에 들어 있는 JSX라는 문법도 처음에는 낯설다.
나도 처음 React를 봤을 때는 “왜 HTML을 JavaScript 안에 넣지?”라는 생각이 들었다. 솔직히 처음 며칠은 정말 이상하게 느껴졌다.
하지만 버튼 하나, 카드 하나, 메뉴 하나씩 만들어보다 보면 어느 순간 갑자기 이해된다.
특히 작은 프로젝트를 직접 만들어보면 React가 왜 편한지 바로 느껴진다.
React를 배우면 무엇을 만들 수 있을까
React를 배우면 생각보다 정말 많은 것을 만들 수 있다.
- 쇼핑몰 사이트
- 블로그
- 채팅 사이트
- 투두리스트
- 메모 앱
- 넷플릭스 같은 화면
그리고 React Native를 사용하면 휴대폰 앱도 만들 수 있다.
즉, React 하나만 배워도 웹사이트와 앱까지 연결해서 만들 수 있는 것이다.
그래서 많은 사람들이 JavaScript를 배우고 나면, 그다음으로 React를 배우려고 한다.
지금 React를 배워야 할까
만약 아직 HTML, CSS, JavaScript가 익숙하지 않다면, React를 너무 빨리 시작할 필요는 없다.
왜냐하면 React도 결국 JavaScript 위에서 돌아가기 때문이다.
하지만 아래 정도는 할 수 있다면:
- 버튼 만들기
- 글자 바꾸기
- if문, 반복문 쓰기
- 간단한 JavaScript 이해하기
그다음에는 React를 배워보는 것이 정말 좋다.
처음에는 조금 어렵고 낯설다. 하지만 한 번 익숙해지면, 다시 예전처럼 JavaScript만으로 웹사이트를 만들기 힘들 정도로 편하게 느껴진다.
그래서 React가 이렇게 많이 사용되는 것이다.