[리액트 TIL] 생활코딩 리액트 2022 - 기본개념(리액트/라이브러리), 실습환경 구축

 

이 포스팅은 공식 React 자습서를 보고 생활코딩 리액트 강의를 듣고 얻은 지식과 결과물을 정리한 내용이므로

자세하고 확실한 정보를 얻기 위해서는 공식 사이트를 확인 바랍니다. (👋 공식 사이트 최고)

 

 

 

 

 

 

React......?

---

 

React는 사용자 인터페이스를 구축하기 위해 만들어진 효율적이고 유연한 Javascript Library이다.

'component'라고 불리는 독립적인 코드의 파편을 이용해 복잡한 UI구성을 돕는다.

 

 

 

라이브러리 넌 뭔데? 🤷‍♂️

라이브러리를 간략하게 설명하자면 남이 써놓은 유용한 코드를 갖다 쓰는것, 내가 원할 때 불러서 사용 가능.

예를 들어 제이쿼리가 있음, 코딩하다가 필요하면 제이쿼리 불러서 쓰고 코딩함!

제이쿼리가 마음에 안 들면 다른 거 가져다가 써도 됨

 

라이브러리와 비슷한 개념인 프레임워크는 그에 따르는 규칙을 적극적으로 수용해야 함.

 

하지만 리액트를 라이브러리가 될 수도 있고 프레임워크가 될수도 있다 <뭐냐 이건 아수라백작?

왜냐면 리액트는 컴포넌트를 불러옴, 규칙을 알려주고 뭐가 틀리고 맞는지 알려준다.

아하, 세상은 흑백논리로 볼 수 없다가 프로그램에도 적용된다.

내가 알맞게 써먹으면 된다라고 생각하고 넘기겠다.

 

 

 

 

 

React 개발환경 세팅

---

 

 

아래 사이트에 들어가서 리액트 개발환경 세팅하는 법을 알아보자.

Create React App

npx create-react-app my-app

터미널에 위와 같이 입력해야 한다.

 

하지만! npx를 사용하기 위해서는 Node.js 설치는 필수다.

백준 알고리즘을 풀기 위해 나는 Node.js를 설치해놨으므로 패스했다.

Node.js설치가 필요하시다면 아래 사이트에 들어가서 최신 버전 또는 안정적인 버전 둘 중 아무거나 설치해도 상관없다.

공부를 하기 위한 목적이니까!

 

Node.js

 

 

 

생활코딩에서는 VScode를 사용한다.

나는 맥북에어를 사용하므로 아래와 같이 뜬다 (윈도우는 다를 수 있다)

설치하시겠냐는 물음에 y 대답하고 설치될 때까지 기다려준다.

지금 보니까 선택지가 y밖에 없다?!

 

 

다 설치가 되면 npm start를 입력해 리액트를 시작한다.

처음 하는 거다 보니까 어쩌고 저쩌고 크롬 뭐를 사용할 거다 라는 팝업창이 뜨는데 허용해주면 된다.

 

 

Vscode에 React가 세팅이 되고 크롬창으로 다음과 같이 뜬다.

짝짝짝, 개발환경을 세팅했다.

이제 개발환경 세팅하는 거 두렵지 않다.

안되면 되게 하고 되면 기뻐하면 된다.

 

 

 

 

만약에 설치환경이 세팅이 어렵다면

온라인 플레이그라운드를 이용하면 된다! (Codepen. replit.. etc)

 

React.js

Hello World in React

 

 

 

 

 

 

Reference (참조)

 

 

 

https://ko.reactjs.org/docs/introducing-jsx.html

https://www.youtube.com/watch?v=t9ccIykXTCM 

https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7