{React.js}리액트 독학! 공식 홈페이지에서 공부하기

 

요즘 웹페이지 개발을 하기 위해서 리액트(React.js)를 공부하고 있습니다.

정리한다는 느낌으로, 혹은 공유한다는 느낌으로 조금씩 정리해보려고 합니다.

 

먼저 리액트의 공식 홈페이지입니다.

https://reactjs.org

이미지 썸네일 삭제

React – A JavaScript library for building user interfaces

A JavaScript library for building user interfaces

reactjs.org

정석은 역시 공식 홈페이지를 통해서 공부하는 것이 가장 중요합니다.

모르는 것은 구글링을 하는 것도 중요하지만, 먼저는 공식 문서에 익숙해지고 공식 문서에서 찾을 수 있도록 하는 것이 가장 좋습니다.

 

M1칩이 탑재된 맥북을 사면서 공식문서의 힘을 더욱 절실하게 느끼고 있습니다.

M1칩의 맥북으로 발생된 문제를 검색해도, 빠르게 업데이트된 상황과 변화된 칩셋의 상황이 대부분의 옛날 답변으로는 해결이 되지 않기 때문입니다.

 

먼저 리액트 공식 홈페이지에 들어간다면 해당 화면이 나타나게 됩니다.

대표사진 삭제

사진 설명을 입력하세요.

해당 화면의 Get Started 버튼을 통해서 차근차근 알아갈 수 있습니다. 비록 영어이긴 하지만 많은 정보가 영어로 되어있고, 해외 개발자들이 영어로 소통하기 때문에 영어에 익숙해지는 것이 중요합니다.

 

하지만 우측 상단의 Language 버튼을 클릭하면 한글로 페이지를 볼 수도 있습니다.

대표사진 삭제

사진 설명을 입력하세요.

기왕 한글화가 되어있으니 한글로 시작해봅니다. 역시 영어 공부는 나중에 하는 것이 마음이 편하긴 합니다.

 

시작하기로 들어온다면 리액트의 전반적인 내용이 간단하게 설명되어 있습니다.

대표사진 삭제

사진 설명을 입력하세요.

이 페이지를 정독해보고 하나씩 눌러보고 왔다갔다 해본다면 리액트가 어떤 것인지 감은 잡을 수 있습니다. 혹은 혼자서라도 가지고 놀 수 있게 됩니다.

 

대표사진 삭제

사진 설명을 입력하세요.

React 시도해보기(Try React) 영역으로 내려보면 온라인 플레이그라운드라고 CodePen, CodeSandbox, Stackblitz에 링크가 걸려있는 것을 확인할 수 있습니다.

 

해당 링크로 들어가게 되면, 내 컴퓨터에 개발환경을 구축하지 않더라도, 코드를 적고 실행해보거나, 혹은 구축되어있지 않은 컴퓨터에서 강의를 들으며 따라해볼수 있습니다. 내 컴퓨터에 뭔가를 설치하지 않더라도 웹페이지에서 리액트를 따라해볼 수 있다는 것이 핵심입니다.

 

대표사진 삭제

사진 설명을 입력하세요.

한번 더 내려가서 웹사이트에 리액트를 추가하기, 새 React 앱 만들기로 간다면, 간단한 소스코드와 따라할 수 있는 방법을 설명해줍니다.

짧은 튜토리얼을 따라하면 간단한 리액트 문서를 만들 수 있게 됩니다.

 

대표사진 삭제

사진 설명을 입력하세요.

한번 더 내려가게 되면 이제 드디어 공식 홈페이지에서 가이드 해주는 리액트를 배우는 챕터입니다. 직접 따라하면서 학습하기와 개념부터 익히는 학습 방법 두가지를 제시해주고 있는데, 사람마다 맞는 방식이 다르니 자신의 방식에 따라 한번 들어가보기도 하고 둘러보기도 합니다.

 

해당 공식문서를 정독할 정도의 집중력이라면 무한한 가능성이 있는 것 같습니다. 저도 아직 정독을 못했기 때문입니다. 다음 포스팅 전에는 정독을 한번 해보던지 정독을 하면서 내용을 포스팅해보던지 해야할 것 같습니다.

 

리액트만 할줄알아도 웬만한 회사에서 1인분은 하는것 같습니다.

 

#리액트 #React #React.js #프론트엔드 #자바스크립트