리액트 공부 방향성에 대해 감이 잡히질 않는다. ㅡ ㅜ ㅋㅋ 공부도 해본 사람이 한다고...
그래서... 뭘 정리할 것도 없기 때문에 메모기록장처럼 그냥 다 써보기로 했다.
render() {
const nemo_count = Array.from({ length: this.state.count }, (v, i) => i) //만들어진 배열 요소 하나하나에 인덱스값을 넣어줌
console.log(nemo_count)
return (
<div className="App">
{nemo_count.map(() => {
return (<div style={{
margin: "10px",
width: "150px",
height: "150px",
backgroundColor: "#ddd"
}}>
nemo
</div>)
})}
</div>
)
}이대로 돌리면 배열로 돌린 네모에 유니크한 키가 없다는 에러가 발생한다.
가상 돔과 진짜 돔을 비교해서 업데이트 시키려 할 때, 비교하기 위한 값이 필요한데, 이 값이 바로 key이다~
원래는 각 요소마다 key가 중복되지 않도록 자동으로 들어가고, element 탭에선 확인 할 수 없는데(리액트 요소만 가지고 있음), map을 사용할 경우, return시마다 map이 돌면서 요소들을 다시 만들어냄 -> 첫번째 만들었던 요소와 두번째로 만든 요소의 키가 달라짐.
import React from "react";
import './App.css'
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 3
};
}
componentDidMount() {
}
render() {
const nemo_count = Array.from({ length: this.state.count }, (v, i) => i) //만들어진 배열 요소 하나하나에 인덱스값을 넣어줌
console.log(nemo_count)
return (
<div className="App">
{nemo_count.map((n, i) => {
return (<div key={i} style={{
margin: "10px",
width: "150px",
height: "150px",
backgroundColor: "#ddd"
}}>
nemo
</div>)
})}
</div>
)
}
}
export default App;
이렇게 map을 돌릴때 요소와 인덱스를 같이 받아와 key에 인덱스값을 넣어주면 매번 함수가 새로 돌아가도 동일한 key를 가지게 됨
this.setState() => state를 변경할 수 있게 해주는 함수. state의 형태에 맞춰주어야 함.
사진에선 딕셔너리 형태니까 똑같이 딕셔너리 형태로.
onclick 이벤트 사용시,
사진과 같이 작성 방법을 다르게 할 수 있다.
주의 할 점 : 그냥 중괄호에 {this.addNemo} 식으로 표시할 경우, 소괄호를 함께 넣어 {this.addNemo()} 로 작성하면 해당 함수에 클릭 이벤트가 발생하지 않았어도 즉시 실행된다. 지금의 경우 count가 무한히 올라가버려 네모가 왕창 생성된다!!!(실험해봤는데 count가 올라가면서 배열이 엄청나게 늘어나다가 에러를 띄우며 멈춰버렸다.)
removeNemo를 사진과 같이 작성시, count가 마이너스까지 내려가 하나 추가 버튼을 눌러도 한번에 추가되지 않는 현상이 발생한다.
조건문을 이용해
count가 0 밑으로 내려가지 않도록 제어.
함수형으로 다시 해보기!
왜 자꾸 에러가 뜨느냐!!!!
=> 컴포넌트에는 state도 없고 count도 없는데 뭐 어쩔티비,,, 하고 있는중.
함수형 컴포넌트에서 state값을 사용할 수 있도록 리액트 훅을 사용
헤헷
매니저님이 오셔서 이런저런 질문을 또 왕창했다.
근데 질문보다 훨씬 더 많은 조언을 주셨음ㅠㅠ!!
데이터의 흐름을 잘 찾아보기.
useState의 리렌더링 중요하니까 꼭 한번쯤 확인해보기! 눈에는 안보여도 계속 리렌더링이 일어나고 있을 수 이따... 다섯번째 동그라미만 칠해졌던 이유는 아마 이것 때문일 것 (상태 변화로 리렌더링 되면서 맵이 다시 도느라 동그라미가 리셋됨)
parseInt 지워도 됐던 이유 => 정수가 아니어도 알아서 숫자로 인식하고 진행이 되긴 하는데, 혹시 모르는 애매한 상황을 배제하기 위해 처음부터 그냥 정수로 만들어버리고 시작하는 것!
리액트 공식사이트에선 키값으로? index를 사용하지 말라고 권고하고 있다...=>당장은 상관 없는데 나중에 어찌 될지 모르니까... 그리고 어차피 나중엔 이런 상황에 백엔드에서 고유 키값?을 줄거임 >.<...!
코드 완성 후에도 한번 리뷰를 맡겨보자.
너무 안될땐.....날리자...........!
{Circle.map((cur, idx) => {
return (
<div className='Circle' key={idx}
onClick={() => { setRate(idx + 1) }}
style={{ backgroundColor: rate < idx + 1 ? "#ddd" : "slateblue" }}
/>)
})}여기서 안쓰인 cur<에 대해 고민을 해보자!
내가 이 페이지에 들어와서 하는 모든게 이벤트!
이벤트 객체에 대해 알아보자..!!!
