설치방법
- console 창에서 react 프로젝트를 만들 이름을 입력하면 react 프로젝트가 설치되어 구성 된다.
npx create-react-app "test-react"
- 프로젝트로 이동 후 npm start로 실행 하면 웹페이지가 표시된다.
cd test-react
npm start
JSX 기본
- JSX는 HTML과 비슷하지만 자바스크립트 이다. JSX를 Babel이 Javascript로 변환해준다.
- JSX는 시작 태그와 끝 태그를 무조건 사용해야 한다.
- JSX는 return 하거나 변수나 Property에 넣어서 사용이 가능 하다.
import React from 'react';
import Hello from './Hello';
function App() {
let tagA = <div>안녕하세요</div>;
return (
<Hello />
<div>안녕히계세요.</div>
<tagA></tagA>
<tagA/>
);
}
export default App;
JSX에서 Javascript 사용하기
- 변수는 선언한 변수를 사용할 곳에 {}
<span>{text}</span> 감싸서 랜더링 할수 있다.
- 태그에 onclick={}, onKeyUp={}
<input onKeyUp={keyEvent}/> <button onClick={onsubmit}>Hello</button> 에 함수를 추가하여 이벤트를 발생할 수 있다.
import './App.css';
function App() {
const onsubmit = () => {
alert('Hello');
};
const keyEvent = (event) => {
console.log('onKeyUP', event);
};
const text = '테스트 입니다.';
return (
<div className='App'>
<input onKeyUp={keyEvent}></input>
<button onClick={onsubmit}>Hello</button>
<hr></hr>
<span>{text}</span>
</div>
);
}
export default App;
JSX에서 Style 사용하기
- css style 사용 시 아래와 같이 style={} property에 담아서 설정이 가능 하다.
- css의 스타일 적용 시 jsx의 태그의 class는 className으로 변경해서 사용해야 한다.
import React from 'react';
let ReactTest = () => {
let style = {
background: 'gray',
width: 64,
height: 64,
};
return <div className="test" style={style}>dddd</div>;
};
export default ReactTest;
React.Fragment
- JSX를 Return 할 때
<div>로 감싸지 않으면 에러 난다.
- 빈 Tag를 반환 하려면
<React.Fragment> 감싸거나 <> </>으로 감싸면 된다.
<>
<div className='d-flex w-100 justify-content-between'>
<h5 className='mb-1'>{item.title}</h5>
<small>{item.price}</small>
</div>
</>
또는
<React.Fragment>
<div className='d-flex w-100 justify-content-between'>
<h5 className='mb-1'>{item.title}</h5>
<small>{item.price}</small>
</div>
</React.Fragment>
useState
- 특정 함수에에서 text 변수에 직접 내용을 넣고 해당 함수를 호출 하면 text의 값은 변경 되지만
<span>{text}</span> 의 text는 화면에 랜더링 되지 않는다 이럴 때 useState 사용한다.
- const [text, setText]에서 text는 변수 명이며 setText는 text의 값을 변경할 함수이다. 각 이름들은 변경 할 수 있다.
- useState() 통해 변경하기 전의 문자열을 text에 설정 하고 setText() 통해 text의 값을 변경 할 수 있다.
import './App.css';
import { useState } from 'react';
function App() {
const [text, setText] = useState('변경 전 문자열 1111111');
const changeText = () => {
setText('변경 된 문자열222222');
};
return (
<div className='App'>
<span>{text}</span>
<button onClick={changeText}>text 값 변경 하기</button>
</div>
);
}
export default App;
- 응용 useState Formt에서 useState 사용하기
import './App.css';
import { useState } from 'react';
function App() {
const [userName, setUserName] = useState('');
const [password, setPassword] = useState('');
const onSend = () => {
alert('로그인');
};
return (
<div className='App'>
<form onSubmit={onSend}>
<input
placeholder='UserName'
value={userName}
onChange={(e) => {
setUserName(e.target.value);
}}
/>
<br />
<input
placeholder='Password'
value={password}
onChange={(e) => {
setPassword(e.target.value);
}}
/>
<br />
<button type='submit'>로그인</button>
</form>
</div>
);
}
export default App;
useState 배열
- useState 배열 사용 시 setMovieList()에는 배열 전체를 전달해야 랜더링이 갱신 된다.
- [...movieList,{}] ...movieList 배열 전체와 추가 될 {} object를 새로 배열로 만들어 전달한다.
let [movieList, setMovieList] = useState([
{ id: 1, title: '스파이더맨', time: '10:00' },
{ id: 2, title: '어벤져스', time: '11:00' },
{ id: 3, title: '아이언맨', time: '12:00' },
]);
let addMovie = () => {
setMovieList([
...movieList,
{
id: (idCount = ++idCount),
title: movieTitle,
time: movieTime,
},
]);
};
useEffect
- useEffect 첫 번째 파라미터는 랜더링 후에 호출 되는 콜백 함수이다.
- useEffect 두 번째 파라미터는 없으면 랜더링 될 때마다 호출 되며 , 빈 배열([])만 있으면 처음 한번만 랜더링 된다. 배열([value])안에 랜더링 될 property만 설정 하면 해당 property가 랜더링 될 때만 호출 된다.
import './App.css';
import { useEffect, useState } from 'react';
function App() {
let [count, setCount] = useState(0);
let [value, setValue] = useState(0);
useEffect(() => {
console.log('1 useEffect count', count);
console.log('1 useEffect value', value);
});
useEffect(() => {
console.log('2 useEffect count', count);
console.log('2 useEffect value', value);
}, [count]);
useEffect(() => {
console.log('3 useEffect count', count);
console.log('3 useEffect value', value);
}, []);
const increase = () => {
setCount(++count);
};
return (
<div className='App'>
<div>count:{count}</div>
<div>value:{value}</div>
<button onClick={increase}>카운트</button>
<button
onClick={() => {
setValue(value + 1);
}}
value 증가
</button>
</div>
);
}
export default App;
component
컴포넌트 생성
counter 컴포넌트 만들기
- 버튼을 누르면 버튼의 카운트가 증가하는 기능을 구현 할때 같은 기능을 가지는 버튼을 3개 만들려면 동일한 코드를 3번 작성해야 한다 이럴 때 컴포넌트를 만들어 재사용하여 반복을 줄일 수 있다.
- src/components/counter.js 파일 생성
- 코드 추가 Counter 함수에 증가시킬 count와 랜더링할 html 태그 코드를 추가 한다.
import React, { useState } from 'react';
let Counter = () => {
let [count, setCount] = useState(0);
let increase = () => {
setCount(count + 1);
};
return <button onClick={increase}>Click {count}</button>;
};
export default Counter;
만든 counter 컴포넌트 사용하기
- 만든 counter.js를 import 한다.
- import한 Counter를 랜더링 되어지는 곳에 html 형태로
<Counter /> 아래 와 같이 사용하면 카운트를 증가시키는 버튼을 3개 만들 수 있다.
import './App.css';
import Counter from './components/counter';
function App() {
return (
<div className='App'>
<Counter />
<Counter />
<Counter />
</div>
);
}
export default App;
컴포넌트 값 전달
컴포넌트를 사용 하는 부분에서 전달할 이름과 값을 설정 한다.
<Counter buttonName='세 번째 버튼' /> 와 같이 설정 시 buttonName은 전달 받을 곳의 object의 property이다 - 문자열이 아닌 정수나 Boolean 형을 전달 하려면
<Counter buttonValue={numberValue} /> {numberValue}의 값이 2이기 때문에 2의 값이 컴포넌트로 전달 된다.
import { useEffect, useState } from 'react';
import './App.css';
import Counter from './components/counter';
function App() {
let [numberValue, setNumberValue] = useState(2);
return (
<div className='App'>
<Counter buttonName='가나다라' buttonValue={numberValue} />
<Counter buttonName='abced' />
<Counter buttonName='세 번째 버튼' />
</div>
);
}
export default App;
컴포넌트에서 전달 받은 값 사용하기
<Counter buttonName='가나다라' buttonValue={numberValue} /> 에서 전달 받은 buttonName,buttonValue의 값은 Counter 파라미터인 props 오브젝트안에 담겨져 있으며 props.buttonName , buttonName.buttonValue를 사용하여 값을 참조 할 수 있다 .
import React, { useState } from 'react';
let Counter = (props) => {
let [count, setCount] = useState(0);
let increase = () => {
setCount(count + 1);
};
return (
<button onClick={increase}>
{props.buttonName} {props.buttonValue}
</button>
);
};
export default Counter;
컴포넌트 함수 전달(컴포넌트로 부터 콜백 함수 이벤트를 받는다)
컴포넌트 선언 시 전달할 함수 deleteMovie 추가 한다.
<Movie movie={item} deleteMovie={deleteMovie} />
컴포넌트에서 props로 deleteMovie 함수를 전달 받아 호출 하면 부모로 부터 전달 받은 deleteMovie callback이 호출이 가능 하다.
import React from 'react';
let Movie = (props) => {
let deleteMovie = () => {
props.deleteMovie(props.movie.id);
};
return (
<div className='list-item' key={props.movie.id}>
<div className='list-sub-item'>{props.movie.title}</div>
<div className='list-sub-item'>{props.movie.time}</div>
<button onClick={deleteMovie}>삭제</button>
</div>
);
};
export default Movie;
조건부 랜더링
- 버튼을 클릭할 때 마다 showRender bolean의 값을 변경 하여
{renderInputAndButton()} 부분의 함수를 호출 하여 해당 태크를 조건에 맞게 리턴 하면 조건부 랜더링을 할 수 있다.
import React, { useState } from 'react';
import './App.css';
function App() {
const [showRender, setShowRender] = useState(false);
let renderInputAndButton = function () {
if (showRender) {
return (
<div>
<input />
<button>버튼이에요!!!</button>
</div>
);
} else {
return '';
}
};
let showClick = () => {
setShowRender(!showRender);
};
return (
<div className='App'>
{renderInputAndButton()}
<button onClick={showClick}>show</button>
</div>
);
}
export default App;
반복문
- 동일한 태그를 반복하여 값만 다르게 설정 할 때 사용한다.
- 아래 반복문은 forEach와 map을 통해 배열로 태그를 저장하여 반환 한다.
- array의 값을 자바스크립트의 반복문을 통해 저장 된 값을 randerList에 담아서 {randerList에} 랜더링 하면 동일한 태그 형태에서 표시되는 값만 변경하여 랜더링 할 수 있다.
- 랜더링 하는 { } 안에 값은 배열로 태그가 저장 되어 있어야 한다.
import './App.css';
import './test.css';
function App() {
let movieList = [
{ id: 1, title: '스파이더맨', time: '10:00' },
{ id: 2, title: '어벤져스', time: '11:00' },
{ id: 3, title: '아이언맨', time: '12:00' },
];
let randerList = movieList.map((item) => {
return (
<div className='list-item' key={item.id}>
<div className='list-sub-item'>{item.title}</div>
<div className='list-sub-item'>{item.time}</div>
</div>
);
});
let randerMovie = () => {
let array = [];
movieList.forEach((item) => {
array.push(
<div className='list-item' key={item.id}>
<div className='list-sub-item'>{item.title}</div>
<div className='list-sub-item'>{item.time}</div>
</div>
);
});
return array;
};
return (
<div className='App'>
<div>
<h1>영화 목록</h1>
{randerList}
<hr></hr>
{randerMovie()}
</div>
</div>
);
}
export default App;
