만들기전 React JSX 기본 문법!
평소에 짜던 html/css 와 다른 부분이 있다.
스타일을 줄때 class가 아닌 className="" 를 사용한다
ex)
let name = 'wook' 변수를 지정하고
ex)
{속성명: '속성값'} 이렇게 넣어서 사용한다
리엑트에선 변수에 데이터 저장을 안해도 state를 만들어서 데이터를 저장할 수 있다!
코function App() {
const [list, setList] = useState([
"JavaScript 독학",
"React 독학",
"Redux 독학",
]);
const [count, setCount] = useState([0, 0, 0]);
const [modal, setModal] = useState(false);
const [title, setTitle] = useState(0);
const [val, setVal] = useState("");
let today = new Date();
let month = today.getMonth() + 1;
let date = today.getDate();
let todays = `${month}월 ${date}일 발행`;드를 입력하세요
이런식으로 데이터를 저장해두고 꺼내와서 사용한다
const [list, setList] = useState('')
여기서 setList 는 list를 변경해주는 함수이다 !
코드를 입function handlInput(event) {
event.preventDefault();
setVal(event.target.value);
}
return (
<div>
<div className="HeaderBar">블로그임</div>
{/* <div className="blogList">
<h4>
{list[0]}
<span
onClick={() => {
setCount(count + 1);
}}
>
👍
</span>
{count}
</h4>
<p>2월 17일 발행</p>
</div>
<div className="blogList">
<h4>{list[1]}</h4>
<p>2월 17일 발행</p>
</div>
<div className="blogList">
<h4
onClick={() => {
setModal(!modal);
}}
>
{list[2]}
</h4>
<p>2월 17일 발행</p>
</div> */}
{list.map((a, i) => {
return (
<div className="blogList" key={i}>
<h4
onClick={() => {
setModal(!modal);
setTitle(i);
}}
>
{list[i]}
<span
onClick={() => {
let copy = [...count];
copy[i] = copy[i] + 1;
setCount(copy);
}}
>
👍
</span>
{count[i]}
</h4>
<p>{todays}</p>
<button
onClick={() => {
let copy = [...list];
copy.splice(i, 1);
setList(copy);
}}
>
삭제
</button>
</div>
);
})}
<input onChange={handlInput} type="text" />
<button
onClick={() => {
let copy = [...list];
copy.unshift(val);
setList(copy);
}}
>
추가
</button>
{modal === true ? <Modal list={list} title={title} /> : null}
</div>
);
}
export default App;
function Modal(props) {
return (
<div className="modal">
<h4>{props.list[props.title]}</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
);
}
최종적으로 추가와 삭제기능 모달 기능까지 구현을 해봤는데 자바스크립트보다 훨씬 편한 느낌이 들었다 . 코드도 간축화 된거 같았고 값을 받아올 때 상당히 편했다
rlaxodnr30.github.io >>> 배포까지 해보았다!
---- 완성본