코지 코더 Kossie Code
동영상 30개조회수 88,303회최종 업데이트: 2021. 4. 6.
https://www.youtube.com/playlist?list=PLB7CpjPWqHOuf62H44TMkMIsqfkIzcEcX
vscode 확장 패키지 추가
1. - Auto Import - ES6, TS, JSX, TSX
2. - Reactjs code snippets
3. - ESLint
4. - Prettier - Code formatter
Visual Studio Code 폴더/파일 아이콘 변경하기
리액트 프로젝트 생성
npx create-react-app 경로
예) npx create-react-app E:\react-app2
클릭 => 01 리액트 설치하기
$npx create-react-app react-basic
$cd react-basic
$ls
$npm start
클릭 => 02 폴더구조 & 컴포넌트 소개
DOM에 엘리먼트 렌더링하기
HTML 파일 어딘가에 <div>가 있다고 가정해 봅시다.
<div id="root"></div>
이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 “루트(root)” DOM 노드라고 부릅니다.
React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있습니다.
React 엘리먼트를 루트 DOM 노드에 렌더링하려면 둘 다 ReactDOM.render()로 전달하면 됩니다.
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
app.js
import './App.css';
function App() {
return (
<div className="App">
<h1>홍길동</h1>
</div>
);
}
export default App;
클릭 => 03 이벤트 핸들링 (onClick & onKeyUp)
공식문서 : 이벤트 처리하기
이벤트 처리하기
React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사합니다. 몇 가지 문법 차이는 다음과 같습니다.
- React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다.
- JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다.
예를 들어, HTML은 다음과 같습니다.
<button onclick="activateLasers()"> Activate Lasers </button>
React에서는 약간 다릅니다.
<button onClick={activateLasers}> Activate Lasers
</button>또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를 명시적으로 호출해야 합니다. 예를 들어, 일반 HTML에서 폼을 제출할 때 가지고 있는 기본 동작을 방지하기 위해 다음과 같은 코드를 작성할 수 있습니다.
<form onsubmit="console.log('You clicked submit.'); return false">
<button type="submit">Submit</button>
</form>React에서는 다음과 같이 작성할 수 있습니다.
App
import './App.css';
function App() {
const onSubmit = () => {
alert("submitted");
}
const onKeyUp = (event) => {
console.log(event.target.value);
if (event.keyCode === 13) {
console.log("전송");
onSubmit();
}
}
return (
<div className="App">
<input onKeyUp={onKeyUp} />
<button onClick={onSubmit}>Submit</button>
</div >
);
}
export default App;
클릭 => 04 리액트 훅스 useState
리액트 공식문서 : Hook의 개요
Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.
import React, { useState } from 'react';
function Example() {
// "count"라는 새로운 상태 값을 정의합니다. const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
App.js
import { useState } from 'react';
import './App.css';
function App() {
const [text, setText] = useState("hello");
const onSubmit = () => {
alert("submitted");
}
const onKeyUp = (event) => {
// console.log(event.target.value);
if (event.keyCode === 13) {
//console.log("전송");
onSubmit();
}
}
const updateText = () => {
setText("Coder");
console.log("1.text", text);
}
console.log("2.text",text);
return (
<div className="App">
<input onKeyUp={onKeyUp} />
<button onClick={onSubmit}>Submit</button>
<br /><br />
<span>{text}</span>
<button onClick={updateText}>Update</button>
</div >
);
}
export default App;
클릭 => 05 폼에서 useState 사용하기
App.js
import { useState } from 'react';
import './App.css';
function App() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [nickname, setNickname] = useState('');
const onSubmit = (e) => {
e.preventDefault();
console.log(username, password);
alert("submitted");
}
const handleForm = (e) => {
setNickname(e.target.value)
console.log("handleForm : ", [e.target.name], e.target.value);
}
return (
<div className="App">
<form onSubmit={onSubmit}>
<input placeholder='Username'
name='username'
value={username}
onChange={(e) => {
setUsername(e.target.value)
}} /><br />
<input placeholder='Password'
name='username'
value={password}
onChange={(e) => {
setPassword(e.target.value)
}}
/><br />
<input placeholder='Nickname'
name='nickname'
value={nickname}
onChange={handleForm}
/><br />
<button>Login</button>
</form>
</div >
);
}
export default App;
클릭 => 06 useEffect 사용하기
리액트 공식문서 : Using the Effect Hook
Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있습니다.
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// componentDidMount, componentDidUpdate와 같은 방식으로 useEffect(() => { // 브라우저 API를 이용하여 문서 타이틀을 업데이트합니다. document.title = `You clicked ${count} times`; });
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}위의 코드는 이전 페이지의 카운터 예시를 바탕으로 하지만, 문서의 타이틀을 클릭 횟수가 포함된 문장으로 표현할 수 있도록 새로운 기능을 더했습니다.
데이터 가져오기, 구독(subscription) 설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는 것까지 이 모든 것이 side effects입니다. 이런 기능들(operations)을 side effect(혹은 effect)라 부르는 것이 익숙하지 않을 수도 있지만, 아마도 이전에 만들었던 컴포넌트에서 위의 기능들을 구현해보았을 것입니다.
App.js
import { useEffect, useState } from 'react';
import './App.css';
function App() {
const [count, setCount] = useState(0);
const [kossie, setKossie] = useState(0);
useEffect(() => {
console.log("count :", count);
}, [count]);
useEffect(() => {
console.log("first rendering");
}, []);
const increment = () => {
setCount(count + 1);
}
return (
<div className="App">
<h1>hong gil dong</h1>
<button onClick={increment}>Click</button>
<button onClick={() => {
console.log("kossie", kossie);
setKossie(kossie + 1);
}}>Click1</button>
</div >
);
}
export default App;
클릭 => 07 컴포넌트로 반복 제거
Counter.js
import React, { useState } from 'react';
const Counter = (props) => {
const { name } = props;
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
}
return (
<button onClick={increment}>{name} - Click {count}</button>
);
};
export default Counter;
App.js
import { useEffect, useState } from 'react';
import './App.css';
import Counter from './components/Counter';
function App() {
return (
<div className="App">
<h1>hong gil dong</h1>
<Counter name="c1" />
<Counter name="c2" />
<Counter name="c3" />
</div >
);
}
export default App;
hong gil dong
c1 - Click 0 c2 - Click 0 c3 - Click 0
클릭 => 08 자식 컴포넌트에 데이터 보내기 Props!
Counter.js
import React, { useState } from 'react';
const Counter = (props) => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
}
const clickString = props.click || "Click";
return (
<button onClick={increment}>{clickString} {count}</button>
);
};
export default Counter;
App.js
import { useEffect, useState } from 'react';
import './App.css';
import Counter from './components/Counter';
function App() {
const [buttonName, setButtonName] = useState("클릭");
const clickButton = () => {
setButtonName("click");
}
return (
<div className="App">
<h1>Hong Gil Dong</h1>
<Counter click="클릭1" />
<Counter click={buttonName} />
<Counter />
<button onClick={clickButton}>Click</button>
</div >
);
}
export default App;
클릭 => 09 조건 렌더링
App.js
import { useEffect, useState } from 'react';
import './App.css';
function App() {
const [condition, setCondition] = useState(false);
const toggle = () => setCondition(!condition);
useEffect(() => {
console.log("condition : ", condition);
}, [condition]);
const renderCondition = condition ? 'True' : 'False'
return (
<div className="App">
<h1>Hong Gil Dong</h1>
<div>
{renderCondition}
</div>
<button onClick={toggle} > Toggle</button>
</div >
);
}
export default App;
클릭 => 10 리액트 반복문
index.css
.movie{
display: flex;
align-items: center;
border: 1px solid gray;
border-radius: 5px;
padding: 5px;
margin-bottom: 20px;
}
.movie .movie-title{
flex-grow: 1;
}
.movie .movie-year{
font-size: 0.5rem;
color: red;
}
Movie.js
import React from 'react';
const Movie = (props) => {
const { title, year } = props.movie;
return (
<div className='movie'>
<div className='movie-title'>{title}</div>
<div className='movie-year'>{year}</div>
</div>
);
};
export default Movie;
App.js
import { useEffect, useState } from 'react';
import Movie from './components/Movie';
function App() {
const movies = [
{ id: 1, title: 'kossie coder1', year: 2001 },
{ id: 2, title: 'kossie coder2', year: 2002 },
{ id: 3, title: 'kossie coder3', year: 2003 },
]
const renderMovies = movies.map((movie) => {
return (
<div className='movie' key={movie.id}>
<div className='movie-title'>{movie.title}</div>
<div className='movie-year'>{movie.year}</div>
</div >
);
})
return (
<div className="App">
<h1>Movie list</h1>
{renderMovies}
{/* {movies.map((movie) => {
return <Movie key={movie.id} movie={movie} />
})} */}
</div >
);
}
export default App;
소스 : https://github.com/braverokmc79/Rreact-KossieCoder
댓글 ( 4)
댓글 남기기