요즘 현대사회에서는 스마트폰이 필수다. 나만해도 눈뜨면 인스타그램을 들어가서 지인들의 최신소식을 확인한다던지 네이버앱을 들어가서 뉴스를 본다. 우리 일상속에서 가장 가깝게 마주하고 있는 부분이 스마트폰 -> 앱 -> 사용자인터페이스 UI로 연결된다.
리액트 공식홈페이지에 가보면 리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리라고 쓰여져있다. 말 그대로 리액트는 UI를 개발하는데 원할하도록 도움을 주는 라이브러리라는 것이다. 자바스크립트로 UI를 제어하려면 굉장히 복잡하고 효율이 떨어지는 작업을 하게 된다. 그런 단점을 리액트가 도와준다! 어떻게 도와주는지 알아보자.
✅ 실제 돔과 가상돔(Virtual DOM)
UI는 사용자가 버튼을 클릭한다던지 새로운 검색결과를 보여줘야한다 던지 어떠한 액션에 의해 시도때도 없이 바뀐다. 자바스크립트로 이러한 동작을 해결하려면 실제 돔에 접근하여 UI가 업데이트 될때마다 수동으로 직접 바꿔줘야한다. 이것은 여간 귀찮은 일이며 코드의 중복도 많고 시간이 소요가 많이 되는 일이다. 그리고 결과론적으로 성능이 저하된다. 한 데이터만 바뀌는데 전체의 UI를 바꾼다면? 이것은 성능이 저하가 될 수 밖에 없다.
리액트는 가상돔을 활용한다. 이 가상돔은 어떠한 값이 바뀌었을때 이전 가상돔과 비교해서 실제로 바뀐 부분만 업데이트하여 실제돔에 반영한다. UI를 직접 조작하지 않아도 바뀐 부분만 업데이트가 된다. 업데이트된 부분만 반영하기 때문에 빠른 업데이트와 성능에 영향을 미친다.
✅ 컴포넌트 기반
리액트는 컴포넌트 기반으로 되어있다. UI요소들이 컴포넌트로 이루어져 있는것 이다. 이 컴포넌트는 재사용이 가능하다. 만약 팔로우 버튼 프로필페이지 에서 쓰고 있는데 마이페이지에서도 사용하고 싶은 경우 팔로우버튼 컴포넌트를 하나 만들어서 양쪽 페이지에 가져다 쓰면 된다. 유지보수에도 용이하다. 버튼에 컬러가 바뀐다면? 팔로우버튼 컴포넌트의 컬러만 바꿔주면 팔로우버튼을 사용하고 있는 페이지는 모두 컬러값이 바뀐다.
컴포넌트안에서 상태관리도 가능하다. 상태 값이 바뀌면 컴포넌트는 자동으로 리렌도링이 된다. 이러한 리액트 컴포넌트는 코드를 구성하고 재사용, 모듈화 하고 생산성을 향상하는데 매우 큰 역할을 하고있다.
✅ JSX 사용
return (
<div>
<div>{company}</div>
<div>{team}</div>
<div>{name}</div>
<div>{phone}</div>
<div>{email}</div>
</div>
);JSX는 자바스크립트를 확장한 문법이다. 자바스크립트로 돔을 그려줘야 할경우 document.querySelector나 템플릿문자열을 사용해야한다. 리액트에서는 JSX문법을 사용해 HTML을 표현해서 돔을 그려준다. HTML 마크업을 할줄 안다면 편하게 작성할 수 있다. 이렇게 HTML을 작성하면 리액트는 ReactElement트리로 변환해준다. HTML과 유사하기 때문에 코드가 단순화 되고 가독성이 좋다.
JSX는 표현식이기 때문에 태그 안에 표현식을 사용할 수 있다. 상태값이 true이거나 false일 경우에 버튼태그를 나타나게 한다던지 하는 단순 표현식들을 HTML태그 안에 작성할 수 있다.
const [isOpen,setIsOpen] = useState(false);
return (){
{isOpen && <button>제출</button>}
}
😎...
UI 개발을 하기위해서 리액트를 써야하는 이유는 위에 설명한 내용만 들어도 충분하다. 사용자들에게 좋은 경험을 계속 제공해줘야 하니까 말이다. 하지만 리액트도 결국엔 자바스크립트 라이브러리 이기 때문에 자바스크립트의 지식은 필수이다. 자바스크립트로 UI 개발을 해보고 리액트 개발을 해본다면 써야하는 이유를 자동으로 알게 되지 않을까 생각된다...ㅎㅎ
