1.후기
말로만 들어본 React, 드디어 해봤다. HTML, CSS, JavaScript, React, 이 4개가 프론트엔드 개발자 최소 조건이라는 말을 HTML도 모를 때 들었는데 벌써 React를 만지는 날이 왔다는 게 신기할 뿐이다.
부트 캠프 시작 전, "어느 정도 기본이 있는 사람들에게 더 효과적이라고 하는데, 지금 들어도 되나? 몇 달 독학하고 다음 모집 때 지원할까?" 하며 망설였다. 하지만 지금 생각으로는 그냥 언제 듣든 이득인 것 같다. 내가 부트 캠프가 아니었다면 한 달 안에 JavaScript 기초 1회독을 할 수 있었을까...?
JavaScript의 교과서라는 "Deep Dive"의 목차를 봤는데 대부분 배운 내용이라 이러한 생각이 더 강해졌다. 아직 deep이 아닌 shallowshallow지만 한 번이라도, 그것도 단기간에 훑어봤다는 것에 만족한다. (물론 Section2 끝나고 '아 예습 좀 하고 올걸'이라고 생각이 바뀔 수 있음😅)
2.새롭게 알게 된 것
Chapter1. React Intro
-1. JSX
-2. map을 이용한 반복
-3. Component
Chapter2. Create React App
<Chapter1. React Intro>
1. JSX
1) React란
프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리
참고. 라이브러리 & 프레임워크
-라이브러리: 컴퓨터 프로그램에서 자주 사용되는 부분 프로그램들을 모아 놓은 것. 언제든지 자유롭게 이용할 수 있도록 구성되어 있음.(비유 예시: 스킨, 로션, 크림, 헤어젤, 향수 등 화장품)
-프레임워크: 소프트웨어 어플리케이션이나 솔루션의 개발을 수월하게 하기 위해 소프트웨어의 구체적 기능들에 해당하는 부분의 설계와 구현을 재사용 가능하도록 협업화된 형태로 제공하는 소프트웨어 환경(비유 예시: 올리브영)
2) React 특징
선언형: JSX를 사용하여 하나의 파일에 명시적으로 작성 가능
컴포넌트 기반: 컴포넌트 기반으로 작성하여 독립성, 재사용성 높음
범용성: 프레임워크가 아닌 라이브러리이기 때문에 기존 프로젝트에서도 유연하게 적용 가능
3) JSX(JavaScript XML)
React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법
4) Babel
JSX -> JavaScript로 바꿔주는 컴파일러
(참고: 컴파일이란 어떤 언어의 코드 전체를 다른 언어로 바꿔주는 과정)
5) DOM & React 웹 애플리케이션을 개발 시 필요한 파일
-DOM -> HTML, CSS, JavaScript(기술적 분류에 따라 코드를 분리)
-React -> CSS, JSX 문법(JavaScript 만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치, HTML과 JS를 통합하는 기능을 함)(기능 별로 코드를 분리)
6) JSX의 필요성
-기능과 구조를 한눈에 확인할 수 있어 DOM 코드보다 명시적으로 코드를 작성 가능
-Babel이 자동으로 JSX 코드를 Javascript로 변환해 주므로 편리함
-JSX 없이 React 요소를 만들 때 보다 코드 가독성 높일 수 있음
// JSX 없이 활용한 React
return React.createElement("h1", null, `Hello, ${formatName(user)}!`);
// JSX를 활용한 React
return <h1>Hello, {formatName(user)}!</h1>;7) 컴포넌트
구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋.
-함수형 컴포넌트(더 많이 사용)
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}-클래스형 컴포넌트
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}8) JSX 규칙
-하나의 엘리먼트 안에 모든 엘리먼트 포함. 최상위에서 opening tag와 closing tag로 감싸주어야 함.
-React에서 CSS class 속성을 지정하려면 "className"으로 표기("class"로 작성하면 자바스크립트 클래스(생성자 함수)로 받아들임)
-JSX에서 JavaScript를 쓰고자 한다면, 중괄호를 이용. 중괄호를 사용하지 않으면 일반 텍스트로 인식.
-React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 함. 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식. 이렇게 대문자로 작성된 JSX 컴포넌트를 사용자 정의 컴포넌트라고 부름.
-조건부 렌더링은 if 문이 아닌 삼항연산자를 이용(조건에 대한 결괏값을 변수에 바로 할당해 주어야 하기 때문, if 문은 바로 할당 불가)
-React에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용. map 함수를 사용할 때는 반드시 map 구문 안의 최상위 엘리먼트/컴포넌트에 "key" JSX 속성을 넣어야 함.Key는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없음. 두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있음.
예시1.
예시2.
const Tweets = () => {// React 엘리먼트이므로 대문자로 시작
return (
// 최상위 엘리먼트, HTML 엘리먼트이므로 소문자 시작, React 안에 있으므로 className 속성 사용
<ul className='tweets'>
//HTML 엘리먼트를 위한 map이 아니므로 key 필요 없음
{dummyTweets.map((tweet) => {
const isParkHacker = tweet.username === 'parkhacker';
//조건부 렌더링 -> 삼항연산자
const tweetUserNameClass = isParkHacker
? 'tweet__username tweet__username--purple'
: 'tweet__username';
return (
<li className='tweet' key={tweet.id}>//js이므로 중괄호
<div className='tweet__profile'>
<img src={tweet.picture} />
</div>
<div className='tweet__content'>
<div className='tweet__userInfo'>
<span className={tweetUserNameClass}>{tweet.username}</span>
<span className='tweet__createdAt'>{tweet.createdAt}</span>
</div>
<div className='tweet__message'>{tweet.content}</div>
</div>
</li>
);
})}
</ul>
);
};예시3.
// 틀림: React 엘리먼트인데 소문자로 시작함
function app(){
return <h1>Hello, world</h1>
}
// 맞음: 단일 요소는 소괄호, 감싸는 요소 생략 가능
function App(){
return <h1>Hello, world</h1>
}
// 틀림: 단일 요소 아닌데 감싸는 태그 없음
const Hello = () => {
return (
<div>안녕하세요</div>
<div>반갑습니다</div>
)
}
// 맞음: 감싸는 태그 있음
const Hello = () => {
return (
<div>
<div>안녕하세요</div>
<div>반갑습니다</div>
</div>
)
}
// 맞음
const Hello = () => {
return (
[<div>안녕하세요</div>,<div>반갑습니다.</div>]
)
}예시4. 삼항연산자
-변수에 할당
-직접 할당
예시5.
React map 사용 시 key 위치 주의
출처: https://ko.reactjs.org/docs/lists-and-keys.html
참고.
-화살표 함수에서 중괄호{}를 쓰게 되면 꼭 return 이 존재해야 함
() => {return #}
-화살표 함수에서 ()를 사용하면 () 안의 값이 return 값이 됨
() => ()
2. map을 이용한 반복
반복적으로 작성해야 하는 부분만 골라서 배열의 요소로 넣으면 React가 이를 인지하고 모든 요소를 렌더링
const posts = [
{ id : 1, title : 'Hello World', content : 'Welcome to learning React!' },
{ id : 2, title : 'Installation', content : 'You can install React via npm.' },
{ id : 3, title : 'reusable component', content : 'render easy with reusable component.' },
// ...
{ id : 100, title : 'I just got hired!', content : 'OMG!' },
];
// map 변수 추출 방식
function Blog() {
const postToElement = (post) => (
// map 내부의 최상위 엘리먼트이므로 key 속성 넣어 줌
<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>;
}
// map 인라인 방식
function Blog() {
const postToElement = (post) => (
// map 내부의 최상위 엘리먼트가 될 것이므로 key 속성 넣어 줌
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
return <div className="post-wrapper">{posts.map(postToElement)}</div>;
}-key 속성값
id 존재하는 경우: 데이터에서 제공하는 id를 할당
id가 없는 경우: 배열 인덱스를 넣어서 해결, 무작위 문자열을 만들어주는 uuid, nanoid 사용
무작위로 생성된 값을 key로 지정하게 되면, 컴포넌트 인스턴스와 DOM 노드를 불필요하게 재생성하여 성능이 나빠질 수 있음.
3. Component
1) 컴포넌트란
-하나의 기능 구현을 위한 여러 종류의 코드 묶음
-UI를 구성하는 필수 요소
-애플리케이션을 구성하는 것(애플리케이션 = 컴포넌트의 조합)
2) 컴포넌트 구조: 트리구조
예시. 유튜브
3) 컴포넌트 개발의 장점
-간편한 수정
컴포넌트 기반 개발은 웹 애플리케이션에서 각 기능 별로 하나의 컴포넌트를 작성하도록 권장. 그래서 컴포넌트 간 의존성이 낮고 독립적으로 작동. 그러므로 간편한 수정이 가능. 예를 들어, 수정사항 발생 시 원하는 수정사항에 맞추어 기존 컴포넌트의 위치만 수정해 주면 됨.
<Chapter2. Create React App>
1) Create React App이란
-React SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인
-Babel, webpack 같은 도구들이 이미 포함되어 있고, 굳이 따로 설정을 해줄 필요 없음
-리액트 프로젝트를 시작하기 위해서는 무조건 Create React App을 사용해야 하는 것은 아님(하지만 프로젝트를 구동시키기 위한 많은 툴들을 다 이해하기 힘들기 때문에 사용)
2) Create React App 실행하기
-폴더 생성
terminal에서 npx create-react-app 폴더이름 입력
-폴더 안에 자동으로 파일 생성
node_modules: react를 개발할 수 있는 package 저장됨
package.json: package 목록에 대한 설명
-react app 실행
package.json 파일의 scripts 참고
여기서는 npm run start or npm run react-scripts start
참고. Font Awesome
<i> 태그 사용
<i>는 icon을 뜻하는 semantic element
