Chapter1. React Intro
1-1. JSX
1-2. map을 이용한 반복
1-3. 컴포넌트
Chapter2. Create React App
Chapter1. React Intro
- React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.
- JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.
- React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.
리액트?
프엔 개발을 위한 자바스크립트 라이브러리
리액트 왜 쓰는가?
=> 특징 3가지 : 선언형, 컴포넌트 기반, 범용성
=> 덕분에 효율적인 프론트 엔드 개발 가능
선언형(Declarative)
리액트는 선언형으로 개발할 수 있다.
한 페이지를 보여주기 위해 HTML/CSS/JS 로 나눠적지 않고, 하나의 파일에 명시적으로 작성할 수 있음
(JSX를 활용한 선언형 프로그래밍을 지향)
컴포넌트 기반
리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶는 컴포넌트 기반으로 개발한다.
컴포넌트로 분리하면 독립적이고 재사용이 가능하여, 기능 작동에 집중하여 개발할 수 있다. +유지보수, 테스트 용이
범용성(Learn Once, Write Anywhere)
자바스크립트 개발 환경에 유연하게 적용될 수 있음
페이스북에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능하다.
1-1. JSX
JSX?
자바스크립트를 확장한 문법
리액트에서 UI를 구성할 때 사용하는 문법
이 문법으로 리액트 엘리먼트를 만들 수 있다!
다만, JSX는 브라우저가 바로 실행할 수 있는 코드가 아님.
=> JS코드로 변환해줘야 함
이 때 이용하는 것이 Babel
JSX -> Babel -> JS -> 브라우저
바벨은 JSX를 브라우저가 이해할 수 있는 JS로 컴파일하고, 그 JS를 브라우저가 읽고 화면에 렌더링하게 됨
DOM 그리고 JSX DOM
지금까지는 HTML, CSS, JS로 개발했다면,
리액트에서는 CSS, JSX 만으로도 웹 애플리케이션 개발가능함
JSX를 사용하면 JavaScript 만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치할 수 있게 되는 것임
⚠️ 그렇다고 JSX가 HTML은 아님.
JSX 왜 씀?
DOM보다 명시적으로 코드 작성할 수 있음.
JavaScript, HTML 파일을 따로 만들지 않고 한 공간에서 작성하므로 웹 앱의 기능과 구조를 한눈에 파악할 수 있음
DOM에서는 JavaScript와 HTML을 연결하기 위한 작업이 필요했음
ex) html 바디태그 끝나기 전에 js 파일 삽입
ex) const title = document.createElemnet('div')
title.textContent = inputTitle.Value
document.body.append(title);-> 리액트는 이런 수고를 덜어준다! 익숙치 않아도 적응해야 함
JSX 없이는 React 요소를 만들 수 없는 걸까?
JSX 없이도 React 요소를 만들 수 있으나 다만 코드가 복잡하고, 가독성이 떨어짐
function app() {
const user = {
성: '문',
이름: '도연'
};
function 이름제조(user) {return user.성 + ' ' + user.이름;}
// JSX 없이 활용한 React
return React.createElement("h1", null, `Hello, ${이름제조(user)}!`);
// JSX 를 활용한 React
return <h1>Hello, {이름제조(user)}!</h1>;
// DOM
const heading = document.createElement("h1");
heading.textContent = `Hello, ${이름제조(user)}`;
document.body.appendChild(heading);
}
JSX 활용과 꼭 알아야할 문법
JSX규칙
규칙1
여러 엘리먼트 작성하고자 할때, 하나의 엘리먼트 안에 모든 엘리먼트가 포함돼야 함
즉, 여러 엘리먼트를 최상위에서 opening tag와 closing tag로 감싸줘야 함
규칙2
CSS class 속성을 지정하려면 "className"으로 표기
class로 작성하면 React는 html 클래스이름이 아닌 자바스크립트 클래스로 받아들이기 때문임
<div className="인사">안녕하슈</div> // O
<div class="인사">안녕하슈</div> // X규칙3
JSX에서 JavaScript 표현식 사용시, 꼭 중괄호를 이용해야 합니다.
중괄호를 사용하지 않으면 일반 텍스트로 인식합니다.
규칙4
리액트 엘리먼트가 JSX로 작성되면 대문자로 시작해야함
소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식하기 때문
이렇게 대문자로 작성된 JSX 컴포넌트를 따로 사용자 정의 컴포넌트라고 부름
규칙5
조건부 렌더링은 if문이 아닌 삼항연산자 사용해야함.
<div>
{ (1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>) }
</div>규칙6
여러개의 html 엘리먼트 표시할 때는 map() 함수 사용해야 함
map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 함
"key" JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시됨
const posts = [
{아이디: 1, 제목: '안녕', 내용: '웰컴 리액트'},
{아이디: 2, 제목: '설치', 내용: 'npm으로 설치할 수 있음'}
];
function Blog() {
const content = posts.map((post) =>
<div key={post.아이디}>
<h3>{post.제목}</h3>
<p>{post.내용}</p>
</div>
);
return (
<div>
{content}
</div>
);
}아래 코드는 위 코드와 생긴 건 다르지만 기능은 같음
const posts = [
{ id: 1, title: "Hello World", content: "Welcome to learning React" },
{ id: 2, title: "Installation", content: "You can install React from npm" }
];
export default function App() {
// 한 포스트의 정보를 담은 객체 post를 매개변수로 받고
// obj를 JSX 표현식으로 바꿔 리턴해주는 함수 postToJSX
const postToJSX = (post) => {
return (
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
};
// TODO: postToJSX 함수를 이용하여 에러를 해결하고 여러 개의 엘리먼트롤 표시해보세요.
return (
<div className="App">
<h1>Hello JSX</h1>
{posts.map(postToJSX)}
</div>
);
}퀴즈
HTML과 JavaScript 를 한눈에 볼 수 있는 확장된 문법이다. (o)
=>JSX는 JavaScript를 확장한 문법으로 주로 React 컴포넌트를 작성할 때 사용하는 문법입니다.
HTML과 문법이 동일하다. (x)
=> JSX는 HTML 문법을 일부 차용했지만, 다른 문법을 사용합니다.
JSX를 이용하여 React 엘리먼트를 만들 수 있다.(o)
=>JSX는 createElement 등의 메서드를 사용하지 않고도 React 엘리먼트를 만들 수 있습니다.
JSX는 JavaScript를 확장한 문법이기 때문에 JavaScript 기본 문법을 활용할 수 있습니다.
=> JavaScript 기본 문법을 활용하려면, JSX 내부에서 중괄호({}) 내에 JavaScript 표현식을 작성하면 됩니다.
JSX의 특징
-마크업과 로직을 분리하지 않고 UI를 만들 수 있다.
-HTML 같은 문법을 활용하기 때문에 디자이너와의 협업에 편리하다.
-JSX는 Babel을 통해 JavaScript로 변환된다.
1-2. map을 이용한 반복(실습)
리액트에서 map메서드는 여러 데이터를 렌더링 할 때 사용함
배열 메서드 map의 특성
- 배열의 각 요소를
- 특정 논리(함수)에 의해
- 다른 요소로 지정(map)한다
예제
하루에 1번 씩 블로그를 쓰는 김코딩이 있다.
포스트가 고작 2개라면 모든 데이터를 코드에 작성하는 하드코딩을 할 수도 있겠다.
하지만 김코딩의 블로그 포스트가 100개인 경우?, 100번이나 하드코딩을 할 순 없다.
=> map을 활용하면 김코딩은 더이상 단순반복행위를 하지 않아도 됨.
//함수선언 후 맵 메서드 적용한 경우
function Blog() {
const postToElemnet = (post) => (
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
const blogs = posts.map(postToElement);
return <div className="post-wrapper">{blogs}</div>;
}
//함수선언과 맵 메서드 적용을 동시에 한 경우
function Blog() {
const blogs = posts.map((post) => (
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
));
return <div className="post-wrapper">{blogs}</div>;
}-> 반복적으로 작성해야하는 부분만 골라서 배열의 요소로 넣으면 리액트가 이를 인지하고 모든 요소를 렌더링한다.
Key 속성
React에서 map 메서드 사용 시, key 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고 뜸.
key 속성의 위치는 map 메서드 내부에 있는 엘리먼트 중 첫 엘리먼트에 넣어줘야 함
key 속성값이 반드시 id가 되어야 하나요? id가 존재하지 않으면 어떻게 해야 하나요?
key 속성값은 가능하면 데이터에서 제공하는 id를 할당해야 함
1-3. Component 기반 개발
"컴포넌트가 무엇인가?"
-
"하나의 기능 구현을 위한 여러 종류의 코드 묶음이다."
-
"UI를 구성하는 필수 요소이다."
-
"컴포넌트는 리액트의 심장이다."
-
"구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋"
- 컴포넌트를 여러 개 만들고 조합하면 애플리케이션을 만들 수 있음
컴포넌트로 생각하기
모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있고, 이 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할을 함
이 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있음
이러한 컴포넌트들의 관계를 트리구조로 형상화할 수 있음
각각의 컴포넌트는 각자 고유의 기능을 가지고 있으면서 UI의 한 부분을 담당하고 있음
독립적인 컴포넌트들을 여러 개 만들고 이들을 한데 모아 복잡한 UI를 구성할 수도 있고, 더 나아가 최종적으로 복잡한 애플리케이션도 만들 수 있음
컴포넌트 기반 개발의 장점
UI 개편할 때, 원하는 수정사항에 맞추어 기존 컴포넌트의 위치만 수정해 주면 됨
DOM의 경우,
HTML을 수정하여 구조를 바꾸고, 화면의 상단에 맞추어 작성되어 있던 스타일 속성을 화면 왼쪽에 맞게 수정해야 함
변경된 구조와 스타일에 맞추어 자바스크립트로 DOM을 조작해야 함;
퀴즈
컴포넌트 기반 개발의 특징
기술적인 특징이 아닌, 실제 사용자가 사용하는 기능을 기준으로 코드를 모아 개발한다.
컴포넌트 기반 개발은 웹 애플리케이션에서 각 기능 별로 하나의 컴포넌트를 작성하도록 권장합니다. 그래서 컴포넌트 간 의존성이 낮아지고 독립적으로 작동합니다.
Chapter2. Create React App
create-react-app를 사용한다면 단 하나의 명령 만으로 자신만의 리액트 프로젝트를 시작할 수 있음
개발자는 빌드에 신경 쓰지 않고, 곧바로 코드 작업에 집중할 수 있음
- Create React App 소개를 보고, Create React App 이 무엇인지 대략적으로 이해할 수 있다.
- npx create-react-app 으로 새로운 리액트 프로젝트를 시작할 수 있다.
- create-react-app 으로 간단한 개발용 React 앱을 실행할 수 있다.
- 리액트 랜덤 명언 앱 튜토리얼을 따라 간단한 리액트 랜덤 명언 앱을 만들 수 있다.
- Create React App으로 만들어진 리액트 프로젝트 구성을 대략적으로 이해할 수 있다.
Create React App
프론트엔드 개발 툴은 리액트, babel, jest 등등 엄청 많음.
->이것들을 한데 모은게 create react app
create react app는 리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인
어떻게 하냐? => 터미널로 ㄱ
1) git --version 확인
2) node --version 확인
3) npm --version 확인
4) 바탕화면에서 mkdir practice
5) cd practice
6) npx create-react-app 원하는프로젝트명
=> (예시) npx create-react-app react-daily-weather
7) happy Hacking 뜨면 완료된 거임
8) npm run start 명령어 실행하면 브라우저에 react App 페이지가 뜸
과제 React Twittler Intro
Twittler를 React로 개발합니다.
- 리액트, JSX 기본 문법을 익힌다.
- 리액트, JSX로 트위틀러를 하드 코딩할 수 있다.
- 컴포넌트를 먼저 개발하는 Bottom-up 개발 방식에 익숙해진다.
- npm script로 리액트 개발에 필요한 기본적인 툴을 사용할 수 있다.
퀴즈
컴포넌트
컴포넌트를 먼저 완성시키고, 레이아웃에 따라 유동적으로 컴포넌트의 위치를 변경할 수 있는 상향식 개발 (Bottom-up) 방식에 적합하다.
리액트 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트 두 종류가 있습니다. 기존에는 클래스형 컴포넌트를 주로 사용했었지만, 최근에는 함수형 컴포넌트를 많이 사용합니다.
모든 컴포넌트 위에는 항상 root 역할을 하는 최상위 컴포넌트가 존재합니다. create react app으로 만든 React 앱에서 볼 수 있는 이 대표적입니다.
함수 컴포넌트 예제
배열의 각 요소는 각각 변수에 담길 수 있는 하나의 JSX 표현식이기 때문에 아래는 JSX 문법을 올바르게 사용하고 있는 예제입니다.
const Hello = () => {
return (
[<div>안녕하세요</div>,<div>반갑습니다.</div>]
)
}key
key는 데이터가 가지는 고유한 id 값(식별자)을 활용합니다.
컴포넌트의 최상위 엘리먼트에 key 속성을 작성해야 한다.
key는 변하지 않고, 예상 가능하며, 유일한 값을 지정해야 합니다. 하지만 고유한 id 값이 없을 경우 배열의 요소가 가지는 인덱스를 이용합니다. 다만, 인덱스를 활용은 최후의 수단(as a last resort)으로 사용해야 합니다. 항목의 순서가 바뀔 수 있는 경우도 마찬가지입니다.
화살표함수
JavaScript
HTML
Python
을 출력하기 위한 코드 중 틀린 것을 고르시오
화살표함수에서 () 를 사용하면 () 안의 값이 return 값이 됩니다. 따라서 아래 예제는 틀림
let langs = ["JavaScript", "HTML", "Python"];
return (
<div>
{langs.map((it) => (
<p>{it}</p>
))}
</div>
);화살표함수에서 중괄호{}를 쓰게 되면 꼭 return 이 존재해야 합니다. return 이 없다면 undefined 를 반환하게 됩니다.
Create react app
SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인이다(o)
Create React App은 리액트 프로젝트를 만드는데 최적화된 도구로서 Babel, webpack 같은 도구들이 이미 포함되어 있고, 굳이 따로 설정을 해줄 필요는 없습니다.
C. 굳이 Create React App을 이용하지 않고도 프로젝트는 시작할 수 있지만 프로젝트를 구동시키기 위한 많은 툴들을 다 이해하기 힘들기 때문에 처음 리액트를 배울 때는 Create React App으로 쉽게 시작하는 편이 좋습니다.
