리액트 초보라는 말이 맞는 말인지 잘 모르겠습니다.
리액트를 배우려면 기본적으로 알고 있어야 하는 게 많기 때문이죠.
리액트에 대해 아무것도 몰랐을 때, 프로젝트에 투입이 된 적이 있었습니다. 여러 기술이 마구 섞인 코드는 암호문에 가까웠습니다. 암호문을 해독하는데, 오랜 시간이 걸렸습니다. 그래서 오늘은 리액트 공부 전에 알아두면 좋을 5가지를 알아보도록 하겠습니다.
1. 자바스크립트 라이브러리다.
지금은 바뀌었는데, 이전 리액트 공식 홈페이지 첫화면에 크게 적혀있던 내용이었습니다. 라이브러리는 해당언어로 만들어 놓은 함수들의 집합을 말합니다. 리액트가 자바스크립트 라이브러리라는 건 리액트는 곧 자바스크립트라는 말입니다.
리액트 = 자바스크립트
이 말은 리액트를 하기 위해서는 자바스크립트 관련 지식이 있어야 된다는 말입니다. 리액트 관련 수업을 들어보면 자바스크립트를 듣고오라고 하는 것도 이 때문이죠. 자바스크립트를 잘하면 리액트도 잘합니다.
2. 타입스크립트를 알아야 한다.
타입스크립트는 타입을 지정해 주는 자바스크립트 기반의 언어입니다. 자바스크립트가 타입에 별로 신경을 안 쓰기 때문에 관련한 에러가 많이 발생합니다. 이런 문제들을 사전에 예방하기 위해, 타입스크립트로 강력하게 타입을 지정해서 개발합니다. 이후 브라우저가 이해할 수 있게 자바스크립트로 변환해서 실행하게 됩니다. 처음에 코드가 암호문처럼 보인다고 했었는데, 타입스크립트의 영향이 컸습니다. 내용이 많지 않기 때문에 알고 가는 것이 좋습니다.
3. JSX형식을 지원한다.
JSX는 JavaScript for XML로 자바스크립트와 XML을 함께 쓸 수 있는 형식이라고 보시면 됩니다. XML은 HTML태그를 생각하시면 됩니다. 태그와 자바스크립트 수식을 섞어서 사용할 수 있기 때문에 기존 방식보다 작성하기 쉽고, 이해하기도 쉽습니다.
기존형식보다는 JSX형식이 훨씬 간결해 보이죠? 그래서 JSX를 사용합니다. 참고로 JSX 없이 기존형식으로도 앱을 개발할 수도 있다는 건 알아두시면 좋겠네요.
JSX 조금 더 알아보기
2023.08.14 - [IT] - JSX(JavaScript for XML) 살펴보기
4. Single Page Application이다.
페이지가 하나라는 거죠. 예전에 개발한 홈페이지를 보면, 링크를 클릭할 때마다 페이지를 서버에서 가져오는 방식을 사용했습니다. 그래서 페이지를 이동할 때마다 페이지 불러오는 시간들이 있었습니다. 페이지가 깜빡하고 나타나는 거죠. 이런 방식을 페이지가 여러 개니까 Multi Page Application(MPA)라고 불렀습니다. 리액트는 모바일 환경에서도 운영해야 하기 때문에, 전체 내용을 처음에 다 가져다 놓고, 필요한 부분만 변경해서 보여줍니다. 전체페이지를 다 불러오기 때문에 처음에 불러오는 시간이 있지만, 이후에는 빠르게 이동할 수 있겠죠. 모든 것이 하나의 페이지로 만들어진다는 개념을 가지고 있으면, 이해하기 쉬운 부분들이 많습니다.
5. 컴포넌트는 함수다.
리액트는 컴포넌트라는 작은 단위의 프로그램을 만들어서, 이것을 쌓아가면서 개발을 합니다. 흔히 레고 블록에 비유를 많이 합니다. 컴포넌트는 레고블록 하나를 의미합니다. 예전에는 컴포넌트를 만들 때, 클래스라는 명령어를 이용해서 만들었는데, 요즘은 함수를 이용해서 컴포넌트를 만드는 것이 일반적입니다. 컴포넌트 작성 코드를 보시면, 앞서 말한 JSX를 리턴하는 함수입니다. 이 역시 컴포넌트가 함수라는 개념을 가지고 있으면 자연스럽게 이해되는 부분들이 많습니다.
컴포넌트 조금 더 알아보기
2023.08.14 - [전체] - React 첫 컴포넌트 만들기
오늘은 리액트 사용 전에 알면 좋은 내용 5가지를 살펴봤습니다. 알면 좋은 내용이 5가지뿐이겠습니까만은 그래도 알고 시작하면 좋은 내용들만 적어봤습니다. 개념을 파악하고 어떤 이론을 접하면 자연스럽게 이해되는 상황들이 생깁니다. 그래서 개념 잡는 것을 먼저 하려고 노력 중입니다. 리액트가 쉽다, 편하다 하는 내용들이 많은데, 생각보다 쉽지 않습니다. 긴 여정이 될지 모릅니다. 앞으로 천천히 살펴보도록 하겠습니다.
'IT' 카테고리의 다른 글
| React 첫 컴포넌트 만들기 (0) | 2023.08.14 |
|---|---|
| JSX(JavaScript for XML) 살펴보기 (0) | 2023.08.14 |
| chatGPT와 페어프로그램 폴더에 있는 pdf 파일 취합하는 파이썬 (0) | 2023.02.27 |
| 주니어 개발자를 대체할 chatGPT (0) | 2023.02.25 |
| 자동 코딩을 도와주는 코파일럿(copilot) 설정 (0) | 2023.02.09 |