리액트 개념 정리를 해보려고 하는 이유를 먼저 설명드리자면,
저는 국비지원을 통해 교육받고 프론트엔드 개발자로 전향했습니다.
이미 국비교육을 들으면서 느꼈던 단점중 하나는,
같이 수업을 듣던 교육생들의 역량이 상이했기에 이걸 모두 맞추려면 진도는 늦어질 수 밖에 없고 결국 중요한 내용을 깊게 다루지 못했습니다.
리액트 동작 원리부터 차근차근 공부하고 싶었지만, 취직이 되었고 회사 프로젝트에 집중하다보니 정리 할 시간이 없었습니다.
회사 프로젝트를 진행하면서 기초지식에 대한 필요성도 절실히 느꼈습니다.
그래서 이번 장은 리액트 기초를 정리 할 예정이고, 3편 정도로 예상하고 있습니다.
React란
리액트는 사용자 인터페이스를 구축하는 JS 라이브러리입니다.
그럼 리액트 라이브러리를 사용하는 이유는 좀더 같단히 사용자 인터페이스를 구축 할 수 있기 때문입니다.
이렇게 사용자 인터페이스를 쉽게 구축하기 위해서 컴포넌트라는 개념을 받아들였고, 리액트는 컴포넌트가 전부입니다.
그럼 컴포넌트라는 것은 무엇일까요?
컴포넌트 (Component)
위의 이미지는 네이버 메인 화면에서 볼 수 있는 하나의 섹션입니다.
보시다시피 뉴스의 종류를 볼 수있는 아이템들이 나열되있는 것을 볼 수있는데요.
제일 중요한건 중복된다는 것을 확인 할 수 있습니다.
이렇게 사용자 인터페이스에서 재사용 할 수 있는 빌딩 블럭을 하나의 컴포넌트라고 이해할 수 있습니다.
좀더 정확한 표현으로
컴포넌트란 HTML 태그를 반환하는 함수
라고 말 할 수있습니다.
하지만 단순한 HTML 뿐 아니라 스타일링을 위한 css 그리고 로직을 위한 자바스크립트 코드를 포함한 HTML입니다.
그럼 왜 컴포넌트로 나눴을까요?
여러 가지 이유중 FE에서 고려 할 수 있는 부분은
재사용성과 분리성입니다.
개발은 처음 배울때 "코드의 중복을 피하라" 라는 말을 많이 들어 보셨을 겁니다.
이를 컴포넌트의 재사용성이 중복성을 방지 해줍니다.
분리성은 코드 베이스를 작고 관리 가능한 단위로 유지 할 수 있게 해줍니다. 즉, 유지 보수가 쉬워진다는 뜻입니다.
그럼 컴포넌트는 어떻게 만들까요?
JSX
JS안에 있는 HTML 코드를 볼 수 있습니다.
JSX는 자바스크립트 XML을 의미합니다.
npm start를 통해 로컬 환경에서 실행된 프로젝트를 웹상에서 확인 할 수 있습니다.
그리고 개발자 모드를 통해 js 파일안에 적었떤 JSX 코드가 HTML코드로 변환되어 렌더링 된것을 확인 할 수 있습니다.
왜 제가 변환된 코드라고 말씀 드리냐면, 소스 탭에서 static 폴더안에 코드를 확인 해보면
저희가 작성하지 않은 코드들도 볼 수 있습니다.
왜냐하면 리액트는 많은 기능들을 지원하기 때문에 단순히 저희가 적었던 코드가 아닌 전체 리액트 라이브러리 소스 코드와 리액트 돔 라이브러리 소스 코드를 포함하기 때문입니다.
JSX코드는 브라우저에서 분석 할 수는 없지만, React가 자동적으로 브라우저에서 작동하는 코드로 변환 해줍니다.
리액트 작동 방식
리액트는 컴포넌트가 전부입니다.
즉, 리액트 == 컴포넌트 라고 표현해도, 모두 고개를 끄덕일 것입니다.
위와 같이 HTML코드가 있습니다. 사실 HTML코드가 아닌 JSX 코드죠.
위에서 언급 했던거 처럼, 컴포넌트는 HTML 코드를 return 하기 때문에, 리액트가 해당 코드를 HTML 코드로 반환합니다.
저희가 작성한 코드는 리액트가 목표로 하는 코드입니다.
리액트는 실제로 화면에 DOM 지시사항들을 생성하고 실행하는 역할을 합니다.
명령적 방식 VS 선언적 방식
웹 브라우저 화면을 기준으로 리액트 없이 위의 App.js와 같은 결과를 내기 위해서
위와 같이 작성하게 됩니다.
이를 명령적 방식이라고 합니다.
즉 브라우저에게 어떤 순서대로 작업을 진행해야하는지 정확하게 지시하고 명령한 것입니다.
이렇게 작업하게 되면 변경되는 수십, 수만가지 요소들을 컨트롤 해야하고 복잡한 사용자 인터페이스가 될 수 있습니다.
하지만 리액트를 사용하여 위의 App.js처럼 작업하게 되면 해당하는 세부 로직은 구현하지 않아도됩니다.
이를 선언적 방식이라고 합니다.
우리가 적었던 코드를 기반으로 리액트에게 선언하게 됩니다.
