본문 바로가기
Udemy - React완벽가이드

Basic of React

by Hanachoi 2023. 1. 30.

# 모듈 소개

  • Component-Driven user Interfaces 를 만들기 위해서는 리액트가 필요하다
  • JSX 구문 
  • component를 구축하는법, 사용법 
  • 리액트에서 데이터를 사용하는 법 : 정적인 데이터만 취급하지 않고 화면에 나타나는 어떤 것들이 변경될때 일부 데이터를 출력하거나 업데이트 한다.

 

#컴포넌트란 무엇인가? 왜 리액트는 컴포넌트의 전부라고 하는가?

  • 리액트는 사용자 인터페이스를 구축하는 자바스크립트 라이브러리다. React is a Javascript lirary for building user Interface. 
  • 리액트 없이도 사용자 인터페이스를 구축하는건 가능하지만 좀 더 복잡한 인터페이스를 구축할 때 작업은 좀 더 쉬워진다. 
  • React is all about "Components" Because all user Interfaces in the end are made up of components.
  • 리액트는 여러개의 빌딩블록으로 이루어져 있다. 같은 블록들이 여러개지만 각각은 다른 데이터(다른 이름, 값)를 담고 있는 경우가 많다. 이게 바로 컴포넌트다. 
  • 컴포넌트는 사용자 인터페이스에서 재사용할 수 있는 빌딩블럭이다.

차트의 블록은 똑같지만 안에 담기는 내용은 각각 다르게 나온다.

  • 컴포넌트는 스타일을 만드는 Html 코드와 css코드, 어떤 로직을 위한 자바스크립트의 결합이다. 
  • 컴포넌트의 재사용은 하나의 특징일 뿐 꼭 재사용해야되는 것은 아니다. 
  • 위의 예시에서도 맨 위에서부터 쭉 내려오면서 보면 <Add New Expense>는 재사용되지 않는 하나의 블록, 날짜 차트바는 각각의 날짜 값을 담아주는 컴포넌트, 아이템을 담은 블럭들도 각각의 컴포넌트 들이다.
  • 리액트는 이런 컴포넌트에 관한 것들이다. 각각의 컴포넌트를 구축하고 리액트에게 최종 사용자 인터페이스에서 어떻게 구성할 것인지 명령할 수 있다. 
  • 재사용성(Reusability)와 우려사항의 분리(Seperation of Concerns)떄문에 리액트는 컴포넌트를 채택한다. 
  • 프로그래밍에서는 코드의 반복을 지양하기때문에 컴포넌트의 재사용성은 유리하고, 우려사항들을 분리하게 되면 코드를 작고 관리가능한 단위로 유지할 수 있게 해준다. 
  • 전체의 자바스크립트 로직과 사용자 인터페이스를 가진 커다란 파일 대신 각각의 컴포넌트는 하나의 과제와 초점에 대해서만  집중 할 수 있다. 
  • 이런 개념은 리액트에서 만든 개념은 아니다. 어떤 프로그래밍 언어에서도 마찬가지로, 무엇을 구축하던지 함수를 사용해서 작업하는 경향이 있고 코드를 여러개의 작은 함수로 나누고 호출한다.  외부에서 가져온 함수를 로직에 넣고 우려사항을 분리하며, 원한다면 같은 코드를 여러번 실행할 수 있게 하기 위해서다. 

 

#리액트 코드는 "선언적방식"으로 작성된다,

  • 결국 사용자 인터페이스는 기본적으로 HTML, CSS, JAVASCRIPT로 구성된다. 우리는 리액트로 작업할 때, 컴포넌트를 사용하고 전체 사용자 인터페이스를 구축하기 위해 이 컴포넌트들을 결합한다. 
  • 물론 CSS도 중요하지만 리액트에서는 HTML과 Javascript가 더욱 초점에 맞춰져 있다. 
  • React allows you to create re-usable and reactive components consisting of HTML and JavaScript. 이 컴포넌트들을 만들기 위해서 리액트는 선언적 접근방식(Declarative Approach)를 사용한다. 
  • 바닐라 자바스크립트로 했던 것처럼, 어떤 HTML요소를 생성하고 인터페이스에서 어떤 위치에 삽입되어야 하는지 리액트에게 명령하지 않는다. 
  • 리액트로 작업할때는 항상 원하는 최종상태, 즉 목표상태 또는 다양한 사황에 따라 다른 목표상태를 정의하는 것이 아주 중요하다. 
  • Define the desired target state(s) and let React figure out the actual JavaScript DOM instructions.
  • 실제 웹페이지에서 어떤 요소가 추가되거나 삭제되고 업데이트 되어야 하는지 해결해줌. 그래서 JS 처럼 DOM 을 업데이트하는 지침들을 직접 작성할 필요가 없다.

 

#새로운 리액트 프로젝트 생성하기

  • Create-React-App을 사용하는게 리액트 파일을 생성하는 가장 빠른 방법이다.
  • 기본적으로 리액트를 사용하게 만들어주는 폴더들과 사용화 할 수 있는 리액트 앱을 구축할 수 있도록 돕는 가장 중요한 환경설정 파일들을 가지고 있다. 
  • 개발하고 실행하는 파일들 사이에는 어느정도 최적화 단계가 필요하다. 
  • create-React-app 을 사용하면 미리보기 기능 등 다양한 것들을 손쉽게 할 수 있어서 사용한다. 
  • 이걸 사용하기 위해서는 node. js가 필요하다. 
npx create-react-app _____ // 리액트 파일을 만들고 싶은 장소
cd _____ // change directory 의 약자
npm start 

// 이 세개의 명령어를 cmd에 쳐서 리액트 파일을 만들 수 있다.
  • 리액트 파일을 만들고 나면 많은 하위 폴더들이 같이 생성되는걸 볼 수 있는데, 그중에서 src 파일과 package.json은 꼭 있어야 하는 파일이다.
  • package.json 파일은 프로젝트에서 어떤 패키지들을 사용하고 있는지 보여준다. 
  • 리액트 파일을 바꿀때는 ctrl+C를 눌러서 이전 파일의  구동을 취소해야한다. 
  • 새로운 파일을 구동시키는 가장 좋은 방법은 VS code로 들어가 터미널을 켜서 두개의 명령어를 치는 것이다.
  • This terminal will automatically navigate into your project folder! So you don't need to 'cd' manually first.
  • 한가지 확실해야 할 것은 우리그 그 파일의 디렉토리에 현재 있어야 한다! <cd 현재파일명>을 먼저 해서 꼭 파일의 위치를 먼저 바꿔주자.
  • npm start를 해야 우리가 미리 개발환경을 미리보기로 볼 수 있다. 여기서 ctrl+C를 해버리면 종료되니까 작업이 끝날때까지는 하지 않도록 주의!
npm install
npm start// 개발서버를 오픈해준다.

 

#표준 리액트 프로젝트 분석하기

  • 리액트 파일을 만드면 왼쪽에 파일 목록들을 볼 수 있다. 
  • 이 중에서 src가 우리가 주로 리액트 작업을 할 폴더이다.
  • 우리는 두개의 js 파일과  하나의 css 파일을 볼 수 있는데, 잊지말아야 할 것은 리액트는 사실 javascript 코드라는 점이다. 
  • index.js : 다른 곳에 나타나지는 않지만 페이지가 로드 될 대 가장 먼저 실행되는 파일이다. localhost:3000이 실행되고 index.js파일에 있는 코드가 가장 먼저 실행된다. 이 코드가 그대로 실행되는건 아니고 변형된 코드가 실행된다. 
  • 코드 변형 및 최적화가 뒤에서 이루어지고 있는데, 바로 그 작업이 백그라운드에서 실행되고 있는 것이다.
  • 원래는 index.css파일을 자바스크립트에 가지고 올수가 없다. 하지만 npm start 를 통해서 에플리케이션 전반에 index.css파일을 추가해달라고 하면 된다.
  • 해당 css 코드를 인식해서 화면의 페이지에 주입하라고 명령하는 것이다. 
  • 일반적인 자바스크립트 구무이 아닌 또 다른 구문의 예로는 <App />가 있다.
  • HTML 구문처럼 보이지만 아니다. 이 코드가 실행되는 이유는 변형시켜서 브라우저에 전달했기 때문이다. 

  • index.js파일이 가장 먼저 실행되는 파일이라는 점을 꼭 기억해야 한다!
  • index.js 파일에서는 react-dom으로부터 ReactDOM을 가져오고 있는데  ReactDOM이라는 오브젝트를 react-dom이라는 서드파티 라이브러리에서 가져온다는 뜻으로, 이 라이브러리는 의존성(dependency)중 하나이며 로컬에 다운로드 및 설치되어 있다.
  • package.json 파일에서 "react-dom" / 'react' 부분을 확인해 볼 수 있다. 
  • 이 둘은 개별적인 패키지지만 React라는 라이브러리라고 생각하면 된다.

  • ReactDOM과 React는 함께 리액트 라이브러리를 이루는 의존성이다.
  • 즉 react나 react-dom에서 무언가를 가져온다면 모두 React와 관련되어 있으며 React 기능을 사용한다는 뜻이다. index.js에서 ReactDOM을 가져오는 것처럼 말이다.
  • 아래 이미지를 보면, react-dom이라는 패키지에서 ReactDOM객체를 내보내고 이를 index.js로 가져왔다. 
  • 그리고 index.js에 가져온 ReactDOM에서 createRoot라는 메서드를 호출하고 있다.
  • 이 메서드는 리액트를 사용해 구축할 전체 사용자 인터페이스의  메인 엔트리 포인트 혹은 메인 훅을 생성한다 

  • 다음으로 root.render(<App />) 부분에서 React에 React 애플리케이션 , 즉 react로 만들 사용자 인터페이스가 로딩되는 웹 페이지의 어느 곳에 위치해야 하는지 알려준다.
  • 그 다음으로 확인해야 할 파일은 public 폴더의 index.html 파일이다. 
  • 이 폴더에서는 거의 작업을 하지 않지만, index.html이라는 중요한 파일을 가지고 있다.
  • 이 단일 HTML 파일이 브라우저에 로드되는데, 오직 이 HTML 파일이 React 애플리케이션에 사용될 것이다.
  • SPA(Single Page Application)에서는 한개의 html 파일만 사용하고 그 외 모든 인터페이스의 변경은 리액트가 처리한다.
  • 이 index.html 파일은 엔트리 포인트로서 리액트가 관리하는 사용자 인터페이스 전반이 렌더링 될 위치가 된다.
  • 이 파일안에는 id가 root인 <div>가 있는데, 아무런 콘텐츠도 가지고 있지 않다. 하지만 리액트가 관리하는 사용자 인터페이스가 연결 또는 주입이 된다. 

  • 이 id='root'는 src/index.js 부분에 getElementById('root')부분에 연결되어 있는걸 볼 수 있는데, 이렇게 일반 자바스크립트 코드로 root를 선택하여 해당 root에 React 라이브러리 메서드를 사용한다. 이 부분이 리액트 애플리케이션이 렌더링 될 주된 위치라는 점을 알려준다. 이게 바로 createRoot의 역할이다.
  • 그리고 이 root의 값을 constfh 변수에 저장한 뒤, root 객체에서 render 메서드를 호출하여 리액트에게 선택된 div에서 무엇이 렌더링 되어야 하는지를 알려준다.
  • <div>가 가장 일반적인 root 요소이다.
  • 그래서 public/index.html 의 <div>안에는 별다른 코드가 없지만 이 <div>의 내부가 <App />이 된다는 것이다.
  • 그럼<App />은 무엇일까?
  • 이건 App.js에서 import 해온 애다. import로 파일을 가져올때는 js라는 확장자를 넣지 않는다.(서드파티 라이브러리나 js 파일 중에서만 해당)
  • App은 컴포넌트 이다. 이 컴포넌트는 root라는 id를 갖는 요소가 있는 곳에 렌더링되는 컴포넌트이다. 즉, div태그 정확히는 이 <div id='root'> in public/index.html 태그 내에 렌더링 되는 것이다.

  • 다음으로 App.js 파일을 보면 간단한 함수 하나와 함께 특이한 모양의 코드가 있는데 이는 JSX라는 기능이다. 리액트 팀에서 만든 형식인데 백그라운드에서 진행되는 코드변환 과정 덕분에 작동한다.

'Udemy - React완벽가이드' 카테고리의 다른 글

리액트 state 및 이벤트 다루기  (0) 2023.02.18
컴포넌트 구성 분할  (0) 2023.02.13
JSX  (0) 2023.02.03
Javascript 리마인드  (0) 2023.01.29
Intro React  (0) 2023.01.26

댓글