스터디에서 책은 '소플의 처음만난 리액트'로 정하였다. 챕터별로 정리를 시작해 보자
사실 한번 글을 날리고 다시 쓰는 거라 대충 쓰겠다..🫠 휴 노션에 쓸걸.
챕터는 아래와 같다. 0-3까지의 정리이다.
여기는 사실 정리할 필요는 없..다
정리하자면 아래와 같다. 이미 안다고 가정하고 넘어간다.
- html
- css
- javascript
- 개발 환경 설정하기
그래도 여기에서 기억할만한 개념을 정리하자면
- SPA: Single Page Application 말 그대로 하나의 페이지만 존재하는 웹사이트
우리가 지금까지 아는 것들, 사용하던 것들은 Multi Page Application이다.
사용자가 페이지를 요청할 때마다 새로운 페이지가 로딩되어 화면에 나타나는 것이다.
반대로 SPA는 하나의 페이지만 존재, 여기에서 페이지가 하나라는 것은 HTML 파일이 하나라는 뜻.
처음에는 이 HTML 파일의 <body> 태그의 내부가 텅 비어있다가 해당 페이지에 접속할 때, 그 페이지에 해당하는 콘텐츠를 가져와서 동적으로 <body> 태그 내부에 채워 넣게 된다. 리액트가 이곳에 채워 넣는다고 생각하면 된다.
1.1 리액트는 무엇인가?
리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리
그럼 라이브러리는 뭔가? 라이브러리는 자주 사용되는 기능을 정리해 모아 놓은 것
그래서 리액트는 뭐라고? 사용자와 웹사이트의 상호작용을 돕는 인터페이스를 만들기 위한 자바스크립트 기능 모음집!
1.2 장점
1.3 단점
이건 그냥 넘어가겠슴니다.
뒷장에 컴포넌트, state, hook이 나올테니까..
그럼 본격적으로 리액트를 사용해보자
그 전에 node.js 설치를 해주세요. node.js는 자바스크립트로 네트워크 애플리케이션을 개발할 수 있게 해주는 환경입니다
npm은 node package manager의 약자로 node.js를 위한 패키지 매니저입니다. npm은 node를 설치하면 자동으로 함께 설치되어요
아래 명령어를 터미널에 쳐서 잘 설치돼있는지 확인
node --version
npm --version
이제 본격적으로 리액트를 사용할 텐데 create-react-app이라는 것을 사용한다. CRA는 리액트로 웹 애플리케이션을 개발하는 데 필요한 모든 설정이 되어 있는 상태의 프로젝트를 생성해 주는 도구
아래 명령어로 패키지 설치 하고 app을 생성한다.
npx create-react-app <project-name>npx는 프로그램을 설치하면서 실행
yarn 을 사용하기도 한다. 이것도 마찬가지로 패키지 매니저, 속도 안정성과 보안이 npm보다 개선이 되어 있다
아래 명령어로 서버 실행
cd my-app
npm start
http://localhost:3000으로 접속이 되는데, localhost는 현재 내가 사용하고 있는 컴퓨터를 의미.
3.1 JSX란?
JSX는 JavaScript XML의 약자이다.
React에서 도입된 JSX는 JavaScript 내에서 HTML과 유사한 코드를 작성할 수 있게 해주는 문법 확장이다.
간단한 예시는 아래와 같다.
const element = <h1 className="greeting">Hello, world!</h1>;
3.2 JSX의 역할
아래 코드로 비교해 보자
JSX를 사용하면 createElement가 필요 없다. 리액트는 JSX 코드를 모두 createcreateElement()함수를 사용하는 코드로 변환하기 때문
//JSX 사용
function App() {
return (
<h1>Hello, GodDaeHee!</h1>
);
}
// JSX 사용하지 않음
function App() {
return React.createElement("h1", null, "Hello, GodDaeHee!");
}
3.3 JSX장점
코드간결, 가독성향상, XSS 방어
3.4 JSX 사용법
1. 반드시 부모 요소 하나가 감싸는 형태여야 한다.
리액트 문법 중에 빈 괄호만 쓰는것. 불필요한 div 태그 줄이기.
// div로 한번에 감싸야 한다
function App() {
return (
<div>
<div>Hello</div>
<div>World</div>
</div>
);
}
2. 자바스크립트 표현식 (중활호를 사용하면 무조건 자바스크립트 코드가 들어간다)
- JSX 안에서도 자바스크립트 표현식을 사용할 수 있다. 자바스크립트 표현식을 작성하려면 JSX내부에서 코드를 { }로 감싸주면 된다.
- 유효한 모든 JavaScript 표현식을 넣을 수 있다.
function App() {
const name = 'hansol';
return (
<div>
<div>Hello</div>
<div>{name}!</div>
</div>
);
}
그럼 실습을 하면서 코드를 보도록 하죠
Book.jsx 생성하고 아래처럼 코드를 적기
import React from 'react';
function Book(props){
return (
<div>
<h1>{`이 책의 이름은 ${props.name}입니다.`}</h1>
<h2>{`이 책은 총 ${props.num0fPage}페이지로 이루어져 있습니다`}</h2>
</div>
)
}
export default Book;만약 함수가 여러개라면?
Library.jsx 생성하고 아래처럼 코드를 적기
Book 컴포넌트를 3개나 렌더링 하고 있지만 가독성이 높은 걸 알 수 있다.
import React from "react";
import Book from "./Book";
function Library(props) {
return (
<div>
<Book name="처음 만난 파이썬" num0fPage={300}/>
<Book name="처음 만난 AWS" num0fPage={400}/>
<Book name="처음 만난 리액트" num0fPage={500}/>
</div>
);
}
export default Library;
마지막으로 실제 화면에 나타애기 위해서 index.js 파일을 수정
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Library from './chapter_03/Library';
ReactDOM.render(
<React.StrictMode>
<Library />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
앞으로 리액트 애플리케이션을 개발할 때에는 무조건 JSX를 사용한다고 생각하기.
자주 사용되는 것을 모음 -> 라이브러리
흐름에 대한 제한 권한 프레임워크는 관리자가 가지고 있음
라이브러리의 권한은 개발자가 가지고 있음
'개발 노트 > React' 카테고리의 다른 글
| 리액트를 다루는 기술 요약- 이벤트 핸들링 (0) | 2022.02.25 |
|---|---|
| 리액트를 다루는 기술 요약- 컴포넌트, props, state (0) | 2022.02.24 |
| 리액트를 다루는 기술 요약- 리액트, JSX 정의 (0) | 2022.02.22 |
