[React] 리액트란?

Suji Kang·2023년 8월 9일

react

목록 보기

1/2

🐾 React.js

V(view)에 집중하여 개발할수 있도록 고안된 라이브러리
개발을 주도하는 회사(페이스북)
핵심개념: 화면단에서 자주 쓰이거나 반복이 되는 부분을 쉽게 다루자

❗️리액트의 핵심 단어는!!?? 컴포넌트(Component)❗️

UI상의 특정 부분을 일컫는 말
리액트 숙련도의 기준은 UI에서 컴포넌트를 어떻게 분리 할것인가 ?
📒 1. 반복이 된다(여러페이지에 사용이 된다)
ex. layout
📒 2. 데이터가 변경이 된다
📒 3. 최소한의 기능을 가지고 있다
ex. button

🐾 랜더링(Rendering)

화면에 UI를 사용자에게 보여주는 행위(그려주는 행위)
👉 초기 랜더링(Initial Rendering)
빈 도화지에 최초로 UI 그려지는 행위
👉 리렌더링(re-Rendering)
이미 그려져있는 UI가 다시 그려지는 행위

node.js 다운로드

nodejs 설치 여부 확인하기
terminal에  👉 node -v

🐾 node.js란?

💁🏻‍♀️ Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다.
💁🏻‍♀️ Node.js는 크롬 V8 엔진을 기반으로 만들어져있는 자바스크립트 실행기

🐾 node.js 를 설치할때 같이 설치가 되는 (npm / yarn)

npm(파일 관리자 프로그램(여러가지 라이브러리를 다운로드 받을수 있는 사이트))을 사용하기 위해서 nodejs를 설치한다. (조금더 오래되서 안전)

yarn(파일관리자 프로그램) (페이스북이만듬..)/속도측으로 조금더 빠르다는 소리도 있고..
두가지차이는 눈에 띄게 차이는 크게 없음 / 개인취향으로 사용 하면됨.

안정성 높은것은 npm, yarn 모두에 올라가있음.

🐾 리액트 라이브러리

📒 리액트 프로젝트 폴더 만들기

(항상 공식문서 확인하기 ❗️ 업데이트되어서 바뀔수있음)

주소를 잘 파악해야한다.
👉 1. 내가 원하는 폴더(위치)까지 이동- cd 해서 들어간다.
👉 2. npx create-react-app 프로젝트이름
npx create-react-app my-react-app

📒 리액트 프로젝트 실행시키기

폴더 경로를 내가 실행시키고자 하는 리액트 프로젝트까지 이동
cd my-react-app/ 
프로젝트 실행
npm start 

🐾 보일러플레이트(기본 리액트 프로젝트 구조)

📒 node_modules 폴더

리액트 프로젝트를 실행시키는 데에 필요한 여러가지 라이브러리(코드모음)가 들어있는 폴더
만약 node_modules 가 없으면 컴퓨터가 코드 해석 못함

📒 public 폴더

이미지, 영상 등 리소스를 모아놓은 폴더
favicon,ico
탭 부분에 표현되는 아이콘

📒 index.html

body태그 안쪽에 오로지 id 가 root인 비어있는 div 하나만 갖고 있는 html 파일 html파일은 index.html 파일 하나만 있어야 한다
  <div id="root"></div>
안쪽에 내용물은 누가 넣어주는것인가 ? index.js가

📒 src 폴더

index.js
index.html 의 root div 의 자식으로 요소를 추가해준다

📒 App.test.js

app.js 에서 만들어놓은 코드가 버그가 없는지 확인(테스트)하는 파일
초기단계에는 필요없으니 삭제(테스트할떄 다시 만들면됨)

📒 .gitignore 파일

github에 올리지않을 파일. gitignore 파일은 이름에서 느껴지듯이 git이 관리하지 않을 파일들을 지정해두는 파일이다.

📒 package-lock.json

📍이 파일은 Node.js 프로젝트에서 사용되는 파일 중 하나로, 프로젝트의 종속성(dependencies)을 관리하는 데 도움을 주는 역할을 합니다. 이 파일은 주로 npm(Node Package Manager)을 통해 패키지를 설치하고 관리할 때 생성됩니다.
📍버전정보가 들어있는 파일

📒 package.json

📍어떤파일이 들어있는지(정보).
📍이 파일은 Node.js 프로젝트의 루트 디렉토리에 위치하는 파일로, 프로젝트에 대한 정보와 설정을 담고 있는 파일입니다. 이 파일은 주로 npm (Node Package Manager)을 사용하여 프로젝트의 종속성(dependencies)을 관리하고 프로젝트를 실행, 빌드, 테스트하는 데 사용됩니다.
📍package.json 파일은 npm init 명령을 사용하여 생성할 수 있으며, 프로젝트를 개발하거나 배포할 때 중요한 역할을 합니다. 프로젝트의 관리, 의존성 관리, 빌드 프로세스, 실행 등에 필요한 정보를 한 곳에 모아둠으로써 프로젝트를 효과적으로 관리할 수 있도록 도와줍니다.

❗️ 협업을 위해서는 우리는 같은 package.json 파일을 사용해서 각자의 컴퓨터에 동일한 패키지들을 설치하여 일관된 개발 환경을 만듭니다. 하지만 각 컴퓨터의 Node.js 버전이 다르면 문제가 발생할 수 있어요. 그러면 팀원들은 npm --version을 확인하고, 때로는 node_modules 폴더를 지워야 할 수도 있어요. (굉장히 번거롭고 시간낭비)
👉
그래서 package-lock.json이 나왔어요. 이 파일은 우리가 어떤 패키지와 어떤 버전을 설치하는지 정확하게 기록합니다. 그래서 다른 버전이나 다른 종속성으로 인한 문제를 예방할 수 있어요. 이제 우리는 이 파일을 통해 일관된 상태로 패키지를 설치하고, 버전 충돌을 피하며, 개발 환경을 효과적으로 유지할 수 있답니다.

❗️ package-lock.json은 package.json으로는 부족한 정보를 도와주는 파일이다. 생성된 package-lock.json파일은 소스 저장소에 꼭 커밋.

📒 README.md

파일은 프로젝트의 루트 디렉토리에 위치하는 텍스트 파일로, 프로젝트에 대한 설명과 문서를 제공하는 역할을 합니다. "README"는 "Read Me"의 약자로, 프로젝트를 처음 접하는 사용자나 개발자들에게 프로젝트의 목적, 사용법, 구성, 설정, 예제 등을 알려주는 중요한 문서입니다.

🐾 JSX란?

자바스크립트의 확장 문법
브라우저에서 실행하기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다

위의 코드들이 마치 HTML을 작성한 것처럼 유사해 보이지만, HTML과는 다른 점이 있습니다. 비슷하면서도 사실은 다른 것이죠. 이렇게 react에서 사용하는 코드를 JSX 라고 부릅니다.