[ 🐱‍💻 강의 노트 ] React 완벽 가이드 강의 정리 섹션 29 | 리엑트 요약 및 핵심 기능

 

 

 

0. React 프로젝트 만들기

표준 JS 프로젝트에는 HTML, CSS와 JS 파일들이 있고 HTML 파일 안에서 외부 파일들을 import 해서 동작한다

React에서는 이런식으로 하면 안됨.
JS 안에 HTML을 쓴다
그래서 React에서는 좀 더 복잡하다. 빌드 단계를 거쳐야 하기 때문.
개발자들이 편한 방법대로 코드를 작성하면 내부적으로 변환된 후 브라우저에 도달.
React에서는 개발 서버도 필요하다. 이 개발 서버가 리액트 애플리케이션을 로컬 호스팅한다.
페이지를 reload하지 않아도 업데이트됨.

도구를 이용해서 React 프로젝트를 만들어야 한다

가장 많이 쓰이는 것은
create-react-app

하지만 이 create-react-app을 쓰려면 Node.js를 먼저 설치해야 한다

Node.js

JS 런타임 모듈.
브라우저 밖에서 JS를 실행할 수 있게 해준다.
Node.js는 create-react-app을 이용하기 위해 설치해야 한다.
내부적으로 Node.js는 계속 쓰임.

• 자동으로 개발 서버를 리로드할 때
• 코드 변환할 때

 

 

1. React 작동 방식 및 component 이해

우리 프로젝트를 브라우저에 띄우면 가장 먼저 작동하는 코드는 index.js 파일의 코드

자바스크립트 구문의 HTML은 빌드 단계를 통해서만 사용 가능하다.
react 안의 HTML은 jsx 코드라고 한다
이 jsx 코드는 내부적으로 변환된다. 코드로 인식이 안됨
index.js에서 ReactDom.render(<APP/>, document.getElementById('root')의 두 번째 인자는 HTML 파일 어디에 들어갈지 위치임.

React로 만든 SPA는 서버에 HTML 파일이 단 하나

React Component

HTML element처럼 사용할 수 있다
리엑트에서 컴포넌트로 이용되는 함수는 반드시 결과값을 리턴해야 한다. 브라우저에 보여지도록,
일반적으로 jsx코드가 return됨

JS에서 class는 키워드이다
더 중요한 것은 CSS class를 할당한 HTML 오브젝트의 이름은 classNAME

jsx에는 classNAME이라고 써줘야 한다.

 

 

 

2. Component 빌드 및 재사용

React의 컴포넌트로 자체적인 블럭을 만들고 필요에 따라 재조합 할 수 있다

이런 컴폰너트 파일들은 root 컴포넌트를 제외하면 모두 별도의 component 폴더 안에 존재

제약
컴포넌트 이름은 항상 대문자로 시작해야 한다(component)
이유

• 나중에 HTML 코드의 컴포넌트로 사용할 때 즉 사용자 정의 HTML element로 사용할 때 대문자로 사용해야지 내장 HTML element로 구분할 수 있기 때문
• 모든 내장 element는 소문자, 사용자가 만든 element는 대문자를 사용해야 한다는걸 꼭 기억

props 및 state

모든 함수 컴포너트가 매개변수를 받을 수 있는데 이것을 보통 props라고 한다
props는 JS 객체.
element에서 추가했던 쌍이 key-value 쌍으로 추가된다

useState를 사용하면 이 애플리케이션에서 사용하고자 하는 상태를 등록할 수 있다. react는 상태 전환에 반응해서 활성화된 상태에 따라 다른 결과들을 렌더링할 수 있다.

onClick같은 것을 props로 전달할 수도 있다.
일반적인 element처럼 component에 onClick을 하면 작동하지 않지만 props로 전달해서 작동하게 할 수도 있음
=> 함수를 props로 전달할 수도 있다

JS에서 함수는 일급 객체. 마치 문자열이나 배열, 객체를 전달하는 것처럼 다른 함수에 전달할 수 있고, component에도 props와 value로 전달할 수 있다.

 

 

 

 

3. Routing 추가하기

react가 빠른 이유 HTML페이지를 새로 불러온게 아니다.
항상 같은 페이지에 있기 때문에,(SPA)
사용자에게 여러 페이지를 돌아다니는 인상은 줄 수 있다
화면에 보이는 내용을 react를 통해 바꿀 수 있다
속도도 빠르고 반응도 즉각적
이유 - 클라이언트 측 자바스크립트가 모든 것을 제어하기 때문에.
서버로 request를 보내는것보다 훨씬 빠르다

라우터

• URL에서 변화 감지
• URL에 기초하여 화면에 보이는 내용 변경
  => 라우팅을 이용하면 사용자들로 하여금 다른 페이지로 넘어갔다고 착각하게 만들 수 있다.

라우터를 사용한다 = 라우팅 툴을 우리 코드에 추가해서 URL 변화를 감지하게 한다

pages라는 폴더를 따로 만들어서 components와 구분한다.
페이지를 넘기면 나올 것들을 여기서 만든다
이 페이지 안에 있는 것들은 페이지 변경 시 라우터가 로딩할 컴포넌트라는 것

 

 

 

 

4. CSS 모듈

create-react-app으로 만들면 안에 내장되어 있다.
스타일을 컴포넌트에 한정하는 기능을 내장한 것을 준다 : CSS 모듈
특정 컴포넌트에 css 파일을 매핑할수있는 기능.

사용방법

• 이름이 .module.css로 끝나야 한다
• 모듈화된 css를 import해야 한다

모듈화된 css를 import 할 수 있는 이유
=> 별도의 빌드 과정이 코드가 브라우저에 도착하기 전에 해석하고 변환해 주기 때문에 이렇게 import할 수 있다.
=> 빌드가 알아서 로딩되는 페이지에 모듈화된 css를 추가해준다.

이렇게 추가할 때 import styles from './...module.css'로 가져오고
element에 className ={styles.header}
이렇게 자주 사용했다.

하지만 사실 import 다음에 나오는 것은 styles 말고 우리가 원하는 것을 넣으면 된다. classes같은것도 가능.
classes.header을 통해 모듈화된 css에 접근하는 것
=> 다른 컴포넌트에 다른 header class가 있다고 해도 이 스타일을 받아가지는 않는다.

 

 

 

5. 별도의 재사용 컴포넌트 만들기

만약 내가 카드 모양을 만드는데 이 모양이 다른 곳에서도 쓰이면
원하는 컴포넌트가 다른 컴포넌트를 감싸는 wrapper로 동작하게 된다. 이 컴포넌트에 스타일을 추가해서 사용하면 됨.
=> 선생님은 ui라는 폴더 안에 이런것들을 담아두었음. 별다른 기능 없지만 웹의 여러 곳에서 사용하는 것들

방법 : component를 만들어서 jsx 콘텐츠를 감싸기

1. Card component(재사용할 컴포넌트)를 import해와서 그 안에 재사용할 jsx파일을 넣어준다.
2. 재사용 컴폰너트에서 props를 받고 그 안 return 안에서 {props.children}을 그려준다

props.children

특수한 prop이다.
모든 컴포넌트가 기본적으로 받아들이는 prop
children은 항상 콘텐츠를 가지고 있는데 그건 open과 close 태그 사이의 콘텐츠.
따라서 component의 open과 close 사이에 들어간 콘텐츠들이 바로 children prop에 저장된다.