리액트(React)란?

리액트(React)는 자바스크립트 기반의 UI 라이브러리로, 현재의 메타(구 페이스북)에서 개발하고 유지하고 있다.

굳이? 왜 해야해?

물론 html, css, js만으로도 웹서비스는 충분히 구현하여 서비스 될 수도 있다. 하지만 리액트가 프론트엔드 분야에서 많이 쓰이고, 우리의 목표인 취업시장에서 많이 사용하는 이유는 크게 3가지가 있다.

• 개발의 효율과 유지보수가 간편 : React는 컴포넌트 아키텍처를 기반으로 두는 프레임워크이다. 컴포넌트들은 재사용될 수 있고, 코드들이 일부분, 작은 파편들로 이루어져 있기에 유지보수에도 간편하단 장점이 있다.
• 가상 DOM : 가상 DOM은 실제 DOM의 변경 없이 메모리 상에서 먼저 변경 사항을 계산하고, 실제 DOM에는 꼭 필요한 부분만 반영함으로써 렌더링 성능을 높이는 방식이다. 이는 마치 JVM이 바로 기계어로 실행하지 않고, 바이트코드 상태에서 중간 최적화(JIT 컴파일 등)를 수행한 뒤 실행함으로써 불필요한 연산을 줄이고 성능을 향상시키는 구조와 유사하다.
• 오픈소스와 활발한 커뮤니티 : React는 프론트엔드 분야에서 큰 입지를 가지고 있는 만큼 다양한 라이브러리와 오픈소스들이 많아 많은 문제들을 해결하는데 적용시킬 수 있다.

이렇게 장점이 크게 3가지가 있는데도 html, css, js만 고집하는 건 어쩔 수 없지만 나는 React를 해야한다 생각한다.

컴포넌트?

컴포넌트란 재사용 가능한 아주 작은 코드 덩어리들이다. 대부분의 웹서비스들을 보면 반복되고 있는 요소들이 정말 많다. 우리가 자주 쓰는 노션 또한 마찬가지인

이렇게 반복되는 블록들이 꽤 있다. 개발자들은 과연 이 반복되는 블록들의 코드들을 하나하나 다 짠걸까?

개발자들은 그런 귀찮은 거 싫어한다. 그 귀찮은 과정을 생략하기 위해 탄생한 것이 바로 컴포넌트 기반의 개발이다.

컴포넌트(Component)는 아주 작은 코드들인데 이 작은 컴포넌트들이 모여서 중간 컴포넌트를 이루고, 중간 컴포넌트를 이루어서 하나의 큰 컴포넌트를 이루게 된다. 이렇게 개발을 하게 되면 반복되는 블록들은 컴포넌트를 가져다 쓰고 전달해주는 요소들만 변경해주면 되기 때문에 개발의 효율과 유지보수성이 올라가게 된다.

프롭스

앞서 내가 컴포넌트를 설명할 때 컴포넌트에 전달해주는 요소들만 변경해준다 했다. 그런데 대체 어떻게 컴포넌트들에 요소를 전달해주는 것일까? 컴포넌트에 요소를 전달해주는 것이 바로 프롭스이다. 프롭스는 우리가 함수에 매개변수를 넘기듯 컴포넌트에 인자를 전달해주는 객체이다.

<Card emoji={dog} title="멍멍" />
<Card emoji={cat} title="야옹" />

function Card(props) {
  return (
    <div>
	    {props.emoji}
	    <h2>props.title</h2>
    </div>
  )
}

이 예시 코드를 보면 분명 같은 컴포넌트인 Card를 사용하고 있다. 하지만 전달해주는 Props의 인자 값을 보면 ”멍멍”과 “야옹”이므로 화면에는 각각 다르게 보이게 된다. 이렇게 해주면 어떤 프롭스를 넘겨주냐에 따라서 동일한 ui에 다른 값을 보여줄 수 있기 때문에 재사용이 용이하고 개발효율성이 증진된다.