인프런 : https://www.inflearn.com/course/한입-리액트
소스 : https://github.com/braverokmc79/react-with-one-bite
들어가며
1.강의 및 강사 소개
2. React 소개
3.오픈채팅방 입장 방법 및 비밀번호
JavaScript 기본
4.Hello World
5.변수와 상수
6.자료형과 형 변환
7.연산자
8.조건문
9.함수
10.함수표현식 & 화살표 함수
11.콜백함수
12.객체
13.배열
14.반복문
15.배열 내장 함수
JavaScript 응용
16.Truthy & Falsy
17.삼항 연산자
18.단락회로 평가
19.조건문 업그레이드
20.비 구조화 할당
21.Spread 연산자
22.동기 & 비동기
23.Promise - 콜백 지옥에서 탈출하기
24.async & await - 직관적인 비 동기 처리 코드 작성하기
25.API 호출하기
Node.js 기초
26.Node.js란?
27.Node.js & VsCode 설치하기
28.Node.js Hello World & Common JS
29.Node.js 패키지 생성 및 외부 패키지 사용하기
React.js 기초
30.Why React?
31.Create React App
32.JSX
33.State
34.Props
React 기본 - 간단한 일기장 프로젝트
35.프로젝트 소개
36.React에서 사용자 입력 처리하기
37.React에서 DOM 조작하기 - useRef
38.React에서 배열 사용하기 1 - 리스트 렌더링 (조회)
39.React에서 배열 사용하기 2 - 데이터 추가하기
40.React에서 배열 사용하기 3 - 데이터 삭제하기
41.React에서 배열 사용하기 4 - 데이터 수정하기
42.React Lifecycle 제어하기 - useEffect
43.React에서 API 호출하기
44.React developer tools
45.최적화 1 - useMemo
46.최적화 2 - React.memo
47.최적화 3 - useCallback
48.최적화 4 - 최적화 완성
49.복잡한 상태 관리 로직 분리하기 - useReducer
50.컴포넌트 트리에 데이터 공급하기 - Context
React 실전 프로젝트 - 감정 일기장 만들기
51.프로젝트 완성 예시
52.페이지 라우팅 0 - React SPA & CSR
53.페이지 라우팅 1 - React Router 기본
54.페이지 라우팅 2 - React Router 응용
55.프로젝트 기초 공사 1
56.프로젝트 기초 공사 2
57.페이지 구현 - 홈 (/)
58.페이지 구현 - 일기 쓰기 (/new)
59.페이지 구현 - 일기 수정 (/edit)
60.페이지 구현 - 일기 상세 (/diary)
61.(서브 챕터) 흔히 발생하는 버그 수정 하기
62.LocalStorage를 일기 데이터베이스로 사용하기
63.프로젝트 최적화
64.배포 준비 & 프로젝트 빌드하기
65.Firebase로 프로젝트 배포하기
66.Open Graph 설정하기
React.js 기초
30.Why React?
강의 :
31.Create React App
강의 :
프로젝트 생성 :
$ npx create-react-app reactexam1
import './App.css';
function App() {
let name = "최준호";
return (
<div className="App">
<header className="App-header">
<h2>안녕 리액트</h2>
</header>
</div>
);
}
export default App;
32. JSX
강의 :
App.js
import React from 'react';
import './App.css';
import MyFooter from './MyFooter';
import MyHeader from './MyHeader';
function App() {
let name = "홍길동";
const style = {
App: {
backgroundColor: "black",
},
h2: {
color: "green",
},
};
const number = 5;
return (
// <React.Fragment>
//<>
<div className="App" style={style.App}>
<MyHeader />
<header className="App-header">
<h2 style={style.h2}>안녕 리액트 {name}</h2>
<b>
{number} 는 {number % 2 === 0 ? "짝수" : "홀수"}
</b>
</header>
</div>
//</>
// </React.Fragment>
);
}
export default App;
32. State
강의 :
Counter.js
import { useState } from "react";
const Counter = () => {
//0에서 출발
//1씩 증가하고
//1씩 감소하는
//count 상태
const [count, setCount] = useState(0);
const onIncrease = () => {
setCount(count + 1);
}
const onDecrease = () => {
setCount(count - 1);
}
const [count2, setCount2] = useState(0);
const onIncrease2 = () => {
setCount2(count2 + 1);
}
const onDecrease2 = () => {
setCount2(count2 - 1);
}
return (
<div>
<h2>{count}</h2>
<button onClick={onIncrease}>+</button>
<button onClick={onDecrease}>-</button>
<br /><br />
<h2>{count2}</h2>
<button onClick={onIncrease2}>+</button>
<button onClick={onDecrease2}>-</button>
</div>
)
}
export default Counter;
App.js
import React from 'react';
import './App.css';
import Counter from './Counter';
import MyHeader from './MyHeader';
function App() {
return (
<div>
<MyHeader />
<Counter />
</div>
);
}
export default App;
33. Props
강의 :
App.js
import React from 'react';
import './App.css';
import Container from './Container';
import Counter from './Counter';
import MyHeader from './MyHeader';
function App() {
const number = 5;
const counterProps = {
a: 1,
b: 2,
c: 4,
e: 5
}
return (
<Container >
<div>
<MyHeader />
<Counter {...counterProps} />
</div>
</Container>
);
}
export default App;
Counter.js
import { useState } from "react";
import OddEvenResult from "./OddEvenResult";
const Counter = ({ initialValue }) => {
//console.log(initialValue);
const [count, setCount] = useState(initialValue);
const onIncrease = () => {
setCount(count + 1);
}
const onDecrease = () => {
setCount(count - 1);
}
return (
<div>
<h2>{count}</h2>
<button onClick={onIncrease} >+</button>
<button onClick={onDecrease}>-</button>
<OddEvenResult count={count} />
</div>
)
}
Counter.defaultProps = {
initialValue: 0
}
export default Counter;
OddEvenResult.js
const OddEvenResult = ({ count }) => {
console.log("count");
return <>{count % 2 === 0 ? "짝수" : "홀수"}</>
}
export default OddEvenResult;
Container.js
const Container = ({ children }) => {
console.log(children);
return (
<div style={{ margin: 20, padding: 20, border: "1px solid grey" }}>
{children}
</div>
);
}
export default Container;
댓글 ( 4)
댓글 남기기