[React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등)

 지금까지 총 13번의 포스팅으로 개발환경 구축부터 기본적인 Input 컴포넌트 개발까지 해보았습니다.

이번에는 앞으로 더 어려운 과정을 나아가기 위해, 기초 관련 글들을 정리하는 시간이 되겠습니다.

 

① 리액트 개발환경 구축

 첫 번째 노드 버전 매니저(NVM)를 설치하고, 그것을 이용해 Node.js , NPM , yarn 등을 설정했습니다.

 

② Visual Studio Code 및 관련 플러그인 설치

 개발환경 구축의 연장으로 VSCode 설치와 Reactjs code snippets , Prettier 플러그인을 설치했습니다.

 

③ 리액트 테스트 앱 생성 및 수정

 yarn을 이용해 테스트 앱을 생성하고 기동 했으며, 아주 간단하게 Hello, world! 수준의 수정을 해보았습니다. 

 

④ 리액트에서 사용하는 JSX

 JavaScript XML에 대한 간략한 설명과 사용법을, 그리고 JSX를 사용하지 않을 경우의 예를 들었습니다.

 

⑤ 리액트의 컴포넌트를 알아보자

 리액트에서 가장 중요한 컴포넌트에 대한 개념과 간단한 컴포넌트 구현 예제를 담았습니다.

 

⑥ 컴포넌트의 데이터 관리 ① - props 프로퍼티

 가장 기초적인 데이터 기능인 프로퍼티에 대해 배워보고, 데이터 타입과 기본, 필수 값 지정을 알아봤습니다.

 

⑦ 컴포넌트의 데이터 관리 ② - state 스테이트

 프로퍼티가 외부(상위) 컴포넌트에서 받아 사용된다면, 스테이트는 내부에서 사용된다는 것을 배웠습니다.

 

⑧ 컴포넌트의 데이터 관리 ③ - 콜백 함수

 부모 컴포넌트에서 자식에게 함수형 프로퍼티로 콜백 함수를 전달해 데이터를 조작하는 방법을 알아봤습니다.

 

⑨ 컴포넌트의 형태를 분류해보자

 컴포넌트에는 함수형, 클래스형 그리고 배열형 컴포넌트의 종류가 있다는 것을 설명했습니다.

 

⑩ 컴포넌트의 Lifecycle 생명주기 함수 - 이론

 클래스형 컴포넌트 안에서 사용하는 총 8가지의 생명주기(Lifecycle) 함수의 이론적인 내용을 담았습니다.

 

⑪ 컴포넌트의 Lifecycle 생명주기 함수 - 실습

 전 포스팅에서 담은 이론적인 내용을 직접 코딩 실습을 하는 내용입니다. 다소 어렵지만 중요한 부분입니다.

 

⑫ 컴포넌트의 DOM 관련 이벤트 - 무한 scroll 예제

 ref라는 특수 프로퍼티를 사용하여 직접 DOM 객체에 접근하는 방법과 scroll 이벤트를 사용한 예제가 나옵니다.

 

⑬ 아이디, 비번 입력 Input 컴포넌트를 만들어보자

 마지막으로 이제까지 배운 거의 모든 내용을 담아, 아이디 비번 입력창을 만들어 보는 시간을 가졌습니다.

 

오늘은 여기까지 입니다. 별다른 추가 내용은 없었지만, 여기서 설명한 기초 내용을 모르면 앞으로

다소 많은 어려움이 있을 수 있으니, 꼭 중요한 부분이라도 이해하고 넘어가 주셨으면 좋겠습니다.

 

기초는 참 쉽죠?

---

2020.10.06 - [웹 프론트엔드/React 리액트] - [React] 재활용 가능한 기본적인 Input 컴포넌트