input 값을 가져오고 변경도 할거다 -> 어 이거야말로 state 역할 찰떡아님?
그럼 일단 input값을 저장할 state생성하기
let [인풋값, 인풋깂변경함수] = useState('');그리고 html DOM구성 component안에서 input생성, 이벤트 달자
<input type="text" onChange={(e)=>{
인풋깂변경함수(e.target.value);
console.log(인풋값);
}}></input>onChange 이건 뭐고
이거 js문법. 이벤트핸들러임.
onChange={(e)=>{인풋깂변경함수(e.target.value);}
onChange만약 상태값이 change되면,
e지금 발생하는 이벤트에 관련한 여러기능을 여기에 담아서 쓸거고,
{인풋깂변경함수(e.target.value);}인풋값의 setter함수 실행할건데
e.target.value이벤트발생한 애 자체의 value값 가져와서 실행혀라
onChange말고도
onClick, onInput, onMouseOver, onScoll 등등 엄청 많음
필요할 때 마다 구글링 ㄱ
먼가 이상한거 발견함 비동기처리
input에 분명 글자 적었는데 첫 글자는 인식못하더니 한 두글자쓰니까 그때서야 인식해요. 뭔가 좀 느린데요..?
맞아요 원래 리액트 state 변경은 애초에 느린 친구에요
이걸 비동기처리라해요
그냥 리액트의 특징이에요. 사람도 다 성격이 다르잖아요...
state는 늦게 변하는 데 js는 성격이 급해서 저렇게 위에 늦는 애들있으면 무시하고 일단 더 빨리 가능한 console.log같은 애들부터 띄워요.
그러니까 아직 state변경 되기도 전에 console.log찍어버리니 한글자 정도 작성했을 땐 아무것도 변화없었던거에요.
만들어보기01) 글 발행 button을 누르면 input값을 받아 목록추가
이렇게 input에 글을 적고 글 발행이라는 버튼을 누르면,
list맨위에 추가하는거 해보겠슴다.
현재까지 위의 코드 상황
//list의 제목을 구성하는 state
let [글제목, 글제목변경함수] = useState(['여자 신발 추천', '강남 하이볼 맛집', '파이썬 독학']);
//input값 받아오는 state
let [인풋값, 인풋깂변경함수] = useState('');{
글제목.map(function(item, index){
return(
<div className="list">
<h4 onClick={()=>{
setModal(true); setModalTitle(index);
}}>{item}
<span onClick={()=>{
let copy = [...따봉];
copy[index] = copy[index] + 1;
따봉변경함수(copy);
}}>👍</span> {따봉[index]}
</h4>
<p>5월 17일 발행</p>
</div>
)
})
}글제목 state를 map으로 반복돌려 list구조를 생성하고 있음.
따라서 글 발행 button을 눌렀을 때 새로운 html을 구성시키는 게아니라, 글제목 state의 가장 첫번째 인자로 input에 적은 글을 넣어주면 됨!
그럼 알아서 map함수에 의해 구성될 것.
<button onClick={()=>{
let copy = [...글제목];
copy.unshift(인풋값);
글제목변경함수(copy);
}}>글 발행</button>1. 배열은 언제나 참조형의 특징을 상기해 spread복사로 배열 새로 생성해주자. (그래야 새로운 rem 주소를 형성해 새로운 state라고 판단>state변경이 일어난다. 안그럼 안해쥼)
2. .unshift()라는 배열의 첫번째 인자 값을 전달해주는 함수를 사용해 인풋값을 첫번째 인자로 넣어줌!
3. 글제목의 state를 변경해주는 글제목변경함수의 값으로 복제해 인풋값 넣어준 배열 copy 전달
만들어보기02) 글 삭제 button을 누르면 해당 리스트 제거
이번엔 list내의 글 삭제라는 버튼을 누르면 해당 list를 제거하는 기능 만들어보겠습니당.
현재까지 위의 코드 상황 방금 전과 모두 동일
{
글제목.map(function(item, index){
return(
<div className="list">
<h4 onClick={()=>{
setModal(true); setModalTitle(index);
}}>{item}
<span onClick={()=>{
let copy = [...따봉];
copy[index] = copy[index] + 1;
따봉변경함수(copy);
}}>👍</span> {따봉[index]}
</h4>
<p>5월 17일 발행</p>
//여기에요!!!!! 글삭제 버튼 추가했지롱!!!!!!!
<button onClick={()=>{
let copy = [...글제목];
copy.splice(index , 1);
글제목변경함수(copy);
}}>글 삭제</button>
</div>
)
})
}1. 거의 국룰처럼 참조형은 뭐다? copy본 만들기
2. copy.splice(index , 1) 함수는 array자료에서 x번째 데이터 n개 삭제하고 싶으면 array자료.splice(x,n)해서 쓰면됨.
여기서 주목할 점은 바로 index
생각해보면 내가 누른 list의 순번대로 글제목array의 인자도 지워주면 되는 것. 이런 순번은 map함수내의 두번째 인자에 담겨있다. 여기서는 index인거고.. 그래서 일케짬!
3. 글제목변경함수로 글제목 state변경~~
