state 개별 숫자 증가, props
1. 과제
1-1. 반복문 처리 없이, 👍 클릭시 개별적으로 숫자 증가 구현하기
/*eslint-disable*/ //경고메세지가 뜨는 eslint 기능을 꺼준다.
import './App.css';
import {useState} from 'react';
function App() {
let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
let [좋아요, 좋아요변경] = useState([0,0,0]);
let [modal, setModal] = useState(false);
return (
<div className="App">
<div className="black-nav">
<h4>ReactBlog</h4>
</div>
<div className="list">
<h4>{글제목[0]} <span onClick={
() => {
let good = [...좋아요];
good[0] = good[0] + 1;
좋아요변경(good)
} }>👍</span> {좋아요[0]} </h4>
<p>2월 17일 발행</p>
</div>
<div className="list">
<h4>{글제목[1]}<span onClick={ () => {
let good2 = [...좋아요];
good2[1] = good2[1] + 1;
좋아요변경(good2)} }>👍</span> {좋아요[1]} </h4>
<p>2월 17일 발행</p>
</div>
<div className="list">
<h4>{글제목[2]}<span onClick={ () => {
let good3 = [...좋아요];
good3[2] = good3[2] + 1;
좋아요변경(good3)} }>👍</span> {좋아요[2]} </h4>
<p style={{display:'inline-block', marginRight: '10px'}}>2월 17일 발행</p>
<button onClick={ ()=> {
modal == false ? setModal(true) : setModal(false)
}}>모달버튼</button>
</div>
{/* {
글제목.map(function(a,i){
return (
<div className="list" key={i}>
<h4 onClick = { () => {setModal(!modal)}} >
{글제목[i]}
<span onClick={ () => {
좋아요변경(좋아요+1);
} }>👍</span>
{좋아요}
</h4>
<p>2월 17일 발행</p>
</div>
)
})
} */}
{
modal == true ? <Modal/> : null
}
</div>
);
}
//컴포넌트
function Modal() {
return (
<div className='modal'>
<h4>제목</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
export default App;
1-2. 반복문 처리해서 구현하기
→ 이전 시간에 배웠던, 펼침연산자를 이용한 배열복사로 풀어준다.
{
글제목.map(function(a,i){
return (
<div className="list" key={i}>
<h4 onClick = { () => {setModal(!modal)}} >
{글제목[i]}
<span onClick={ () => {
let good = [...좋아요];
good[i] = good[i] + 1;
좋아요변경(good);
} }>👍</span>
{좋아요[i]}
</h4>
<p>2월 17일 발행</p>
</div>
)
})
}🗨️사담)
맨 처음에 이렇게 했던 것 같은데 그때는 뭐 때문인지 오류가 계속 났다....
정답 볼까말까 고민하다가 반복문부터 적용해보지 말고, 반복문 없이 적용해보라는 멘트를 보고
반복문 없이 → 반복문 추가해서 처리하니 더 쉽게 구조가 보였다. 아직은 구조에 익숙하지 않으니,
이렇게 풀어서 바꾸는 방식으로 연습하는 게 좋을 것 같다.
2. Props
함수 안에 있는 모든 변수는 함수 바깥에서 쓸 수 없다.
그래서 Modal 함수에서 App 함수 내의 글제목 state를 가져 쓸 수 없다.
→ 이를 해결하기 위한 게 props
2-1. 부모 컴포넌트 → 자식 컴포넌트로 state 전송하기
props를 이용하면, 부모 컴포넌트에서 자식 컴포넌트로 state를 전송할 수 있다.
→ 부모 컴포넌트의 state를 사용할 수 있게 함
- 부모 컴포넌트 내 자식컴포넌트 사용하는 곳에 서 <자식컴포넌트 작명={state이름} />
- 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props.작명 사용
* props 작명은 보통 사용하려는 state 이름으로 쓴다. (다른 것도 가능)
* props는 부모에서 자식 컴포넌트로만 가능하다.
funcion App() {
let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
return (
<div className="App">
<Modal 글제목={글제목}/> {/* <자식컴포넌트 작명={state이름} /> */}
</div>
)
}
//자식컴포넌트 - Modal
function Modal(props) {
return (
<div className='modal'>
<h4>{props.글제목}</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
* props의 파라미터로 넘길 수 있는 것은 state만 넘길 수 있는 게 아니라 일반 변수, 함수, 문자 전송도 가능
* 문자 전송시에는 중괄호 없이도 가능하다.
funcion App() {
let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
<div className="App">
<Modal color={"pink"} 글제목={글제목}/>
{/* <Modal color="pink" 글제목={글제목}/> */}
</div>
}
//자식컴포넌트 - Modal
function Modal(props) {
return (
<div className='modal' style={{background : props.color}}>
<h4>{props.글제목}</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
* 파라미터 문법
매개변수(parameter) 는 함수에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미
인수(argument)는 함수가 호출될 때 함수로 값을 전달해주는 값
function run(매개변수) {
실행할 코드;
}
run(인수);자바스크립트에서는 정의된 함수보다 적은 인수가 전달되어도 오류가 발생하지 않는다.
대신 전달되지 않은 매개변수는 undefined로 값 설정된다.
2-2. props 과제
자식 컴포넌트(모달)의 수정버튼을 누르면, 모달 내 제목 변경하기
funcion App() {
let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
<div className="App">
<Modal color={"pink"} 글제목={글제목} 글제목변경={글제목변경}/>
</div>
}
//자식 컴포넌트
function Modal(props) {
return (
<div className='modal' style={{background : props.color}}>
<h4>{props.글제목[0]}</h4>
<p>날짜</p>
<p>상세내용</p>
<button onClick={()=> {
// 2-1.
// props.글제목변경(['여자코트 추천', '강남 우동맛집', '파이썬독학'])
// 2-2. 펼침연산자를 통해 복사 후 변경
let copy = [...props.글제목];
copy[0] = '여자코트 추천';
props.글제목변경(copy)
//1. 그대로 바꾸면 → 동일한 state로 생각해 안바뀜
// props.글제목[0] = '여자코트 추천';
// props.글제목변경(props.글제목)
// console.log(props.글제목)
}}>글수정버튼</button>
</div>
)
}