인프런 이정한님의 [ 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 ] 강의 수강 후 강의의 내용을 정리하며 공부한 것을 쓴 게시글입니다.
Why React?
- React는 Component 기반의 UI 라이브러리이기 때문이다.
- React는 선언형 프로그래밍 방식이다.
- React는 Virtual DOM을 사용한다.
Create React App
# React.js
: Node 기반의 자바스크립트 UI 라이브러리
# Webpack
: 다수의 js파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리
# Babel
: JSX 등의 쉽고 직관적인 자바스크립트 문법을 사용할 수 있도록 해주는 라이브러리
- 모든 패키지(라이브러리)들을 모두 설치하고 이해하는 것은 어려움
- 부수적인 패키지들은 직접 설치하지 않고 , 이미 자동으로 세팅 완료된 패키지인 Create React App을 사용
# Boiler Plate : 마치 보일러를 찍어내듯, 서비스를 개발할 수 있는 빵 틀의 역할을 하는 패키지를 의미
- react app 설치하기 명령어
npx create-react-app reactexam1
- node-modules는 매우 용량이 큰 디렉토리이므로, 깃 등에 프로젝트 공유 시 node-modules 디렉토리를 제외하고 업로드
- App.test.js, reportWebVitals.js, setupTests.js 는 사용하지 않으면 삭제해도 됨
# export default : import 함수명 from * 으로 사용가능
- 하나의 파일에서 한개만 내보내기 가능
- export 할 경우에는 import { 함수명 } from * 으로 사용
JSX
# JSX(JavaScript XML)
: Javascript에 XML을 추가한 확장한 문법
- 프로젝트를 개발할 때 사용, 공식적인 자바스크립트 문법은 아님
- 하나의 파일에 자바스크립트와 HTML을 동시에 작성
- 자바스크립트에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉬움
# JSX 규칙
- 반드시 모든 태그를 닫아주어야 한다.
- 최상위 태그가 감싸는 형태여야 한다.
- 자바스크립트 값을 JSX 내부에서 사용할 떄는 중괄호로 감싸주어야 한다.
- 태그의 class이름 설정 시, class="name"이 아닌 className="name" 식으로 지정해야 한다.
State
# state
- 컴포넌트 내부에서 변경 가능한 데이터를 관리해야할 때 사용
- props는 (함수 매개변수처럼) 컴포넌트에 전달되어 값의 변경이 불가한 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리하므로 값의 변경이 가능
- 보통 이벤트와 함께 사용
- 동적인 데이터를 다룰 때 사용
- import { useState } from "react";
- State 선언
const [count, setCount] = useState(0);
- component는 state가 바뀌면 리렌더링 함
▽ +버튼을 누르면 숫자가 증가하고, - 버튼을 누르면 숫자가 감소
import { useState } from "react";
const Counter = () => {
const [count, setCount] = useState(0);
const increase = ()=>{
setCount(count+1);
}
const decrease = ()=>{
setCount(count-1);
}
return (<div>
<h2>{count}</h2>
<button onClick={increase}>+</button>
<button onClick={decrease}>-</button>
</div>)
}
export default Counter;
프로퍼티(Props)
# 프로퍼티(Props)
: 상위 컴포넌트가 하위 컴포넌트에게 값 전달시 사용 ( 단방향 데이터 흐름)
- 수정 불가 ( 하위 컴포넌트 기준에서 읽기 전용 데이터)
- 하위 컴포넌트에서 프로퍼티의 값을 이용해 리액트 엘리먼트를 작성하여 리턴함
- props는 (함수 매개변수처럼) 컴포넌트에 전달
- 컴포넌트의 매개변수로 props를 전달하고 자식 컴포넌트에서 그 값을 활용
<Counter initialValue={2}/>
const Counter = (props) => {
const [count, setCount] = useState(props.initialValue);
- 기본값 설정 가능
Counter.defaultProps={
initialValue:1
}
* 컴포넌트가 리렌더링되는 경우
- 컴포넌트 본인이 가진 state가 변경될 때마다 리렌더링
- 컴포넌트 본인이 가진 props가 변경될 때마다 리렌더링
- 부모 컴포넌트의 state가 변경될 때마다 리렌더링
- 컨테이너로 감싸기
const Container = ({children}) =>{
return (<div style ={{margin:0, padding:20, border:"1px soild gray"}}>
{children}
</div>
);
};
export default Container;
function App() {
return (
<Container>
<div className="App">
<MyHeader/>
<Counter initialValue={2}/>
</div>
</Container>
);
}
'FRONTEND > React' 카테고리의 다른 글
[ 인프런 - 한입 크기로 잘라 먹는 React] 3. React 실전 프로젝트 - 감정 일기장 만들기(2) (0) | 2023.01.09 |
---|---|
[ 인프런 - 한입 크기로 잘라 먹는 React] 3. React 실전 프로젝트 - 감정 일기장 만들기(1) (0) | 2023.01.08 |
[ 인프런 - 한입 크기로 잘라 먹는 React] 2. React 기본 - 간단한 일기장 프로젝트 (2) (0) | 2023.01.06 |
[ 인프런 - 한입 크기로 잘라 먹는 React] 2. React 기본 - 간단한 일기장 프로젝트 (1) (0) | 2023.01.03 |
[ 생활코딩 Web2 - React ] 컴포넌트, props, 이벤트, state, create, update (0) | 2022.12.11 |