Iterator
JS 자료형에는 원시형과 객체가 존재하는데 몇몇을빼고는 Iterate한 자료형이다.
그리고 배열과 객체에 쓰이는 메서드도 종류가 다른데 그건 추후 다른 블로그에서 다뤄보고
나는 일단 배운것이 대부분의 Data는 Json 형태로 받게 되는데
[{},{},{}...]의 형태라고 배웠고 이를 해결하기 위해서 여러메서드들을 찾아보다 몇가지를 알게된 것을 정리한다.
배열에서는 for문을 잘 적용하지 않는다고 하니 forEach, map, filter등을 많이쓴다고 한다.
Map
map:배열 기준으로돈다 배열기준으로 부르기 때문이다.
const arr = [1,2,3,4,5]
arr.map(() => {
})
새로운배열을 출력한다!
users.map((obj)=>{
return <Component key ={users.email} a ={10} />;
}
<Component />
<Component />
<Component />
<Component />
변화발생시 유추를 위해 각자 고유의 key값이 필요하다(같은 파일에 존재하는 component이기 때문에 구별할 수 있는수단이 필요)
정 쓸 수 있는 수단이 없다면 index를 사용한다.
re-rendering될 시 react가 인지 못할 수 있다.
다른 componenet랑 키값겹칠수도 있다.
const arr = [{},{},{} ...] users.map((obj, index)=>{ return <Component key ={index} a ={10} />; }
const arr = [{},{},{} ...] users.map((obj, index)=>{ return <Component key ={index} a ={10} />; }
component용으로 map을 사용하려면 거기도 최종으로 감싸주는 부모태그가 필요하다.
key는 return문의 가장 부모태그에 Key를 준다.
class 내의 constructor는 class내의 변수들을 초기 설정해주는 역할이다.
this.state는 component의 변경가능한 정보(상태)들을 저장하는 곳
함수의 레퍼런스란 함수의이름(번지수)임
세가지의 차이점 항상인지하고 있자!
<div onClick ={this.hello()} className="state-header">State / Props 연습!!</div>
<div onClick ={this.hello} className="state-header">State / Props 연습!!</div>
<div onClick ={()=>this.hello()} className="state-header">State / Props 연습!!</div>
map 내가쓴것
실제로 써본 map 코드를 보자
관련된 Component는 배열속 객체 하나하나를 Item이라고 명명했다.
각 각의 컴포넌트에 함수를 걸어줄 것이며 하나하나에 값을 오르락 내리락 하게 만들기 위해 아래와 같이 짯다.
그렇다.
(뭔소리지..)
handleCounting=(item, inDecrement, e)=>{ if(e.target.name === "plusButton"){ this.setState({ pickedItem: this.state.pickedItem.map(el=> el.name === item.name ? {...el, price: (el.price*(el.count+1))/(el.count), count: el.count+inDecrement}: el), }) } if(e.target.name === "minusButton"){ this.setState({ pickedItem: this.state.pickedItem.map(el=> el.name === item.name ? {...el, price: parseInt((el.price*(el.count-1))/(el.count)), count: el.count+inDecrement}: el) }) } }
위 코드에서 가장 신경써서 본 것은 map을 돌릴때 배열내의 각자 객체에 동일한조건을 걸고 직접 선택한 객체에 값을 오르락 내리락하게 만들고 싶었다.
각자 선택을 하기 위해서 el.name === item.name ? .... 의 조건을 걸어줬다.
조건이 맞다면 원하는 결과를 실행하고 그렇지 않다면 그냥 el(하나의 객체임)를 반환하게 만든 것이다.
아이디어의 출처는 누구나 그렇듯 stackoverflow를 검색한 것이다.
filter 내가 쓴것
pickedItem: this.state.pickedItem.filter(el => el.name !== item.name)
클릭한 놈의 이름 값이 item.name, 컴포넌트 만들때 썻던 놈들의 각각의 이름이 el.name이다
그러니까 저 함수는 클릭한놈 빼고 나머지는 다 살려주는 함수이다.
이런 식으로 filter를 써서 선택한 것만 제외 또는 선택한것을 제외한 나머지를 제거 등을 구현할 수 있다.
안타깝게도 forEach는 아직 안써봤으니 추후 기대를 하자
for문 활용
동기님이 도와주신 마성의 코드다
기존의 받은 데이터에 필요 값을 하나씩 넣어 내가 필요한 속성인 active를 각 각 추가해준것
이런 아이디어는 정말.. 공부를 열심히 해야 나오나 보다.
for(let color of this.state.colors) color.active = false;
동기, 비동기
setState사용으로 발생된 객체는 완전 다른객체임(같은객체에서 값이변경된게 아니다)
js비동기: 코드를읽는순서가 있는데 비동기, 동기라는 형태가 있다.
동기: 때가오면 실행하고마치고 넘어간다.(순서가 되면 실행하고 넘어감) Ex)console.log
비동기: 하나의 요청
A//동기
b//비동기
c//동기
d//동기
b의 요청에 응답할때까지 기다리는게 아니라 실행가능한 동기부터 먼저 실행시키려고 넘어가버림
Ex) setState: 비동기 + console.log()
이렇게 상태 확인하고 싶으면 그냥 render에서 console.log로 불러버리는게 개이득
순서 알고싶으면 console.log를 다 심어놓자 :)
componenetDidMount() {
보통 데이터를 처음 받아올때 이곳에 넣는다
product list, 등 딱한번만 불러도 되는 것..
보통 fetch를 여기서 쓴다.
console.log("CDM")
}따라서 componentDidMoundt는 아래의 순서로 사용된다 보면된다.
- 데이터 요청 :
fetch() - response확인 :
console.log() - 내가원하는 정보를 state에 담는다. :
setState() - render로 넘어감
render()
fetch로 요청후 응답이 올때 실행할 함수를 넣는곳이 .then()임
json으로 받는이유는 원활한 통신을 위해서임(전부다 공용으로 쓰는 언어가 필요해서이다)
아래와 같이 필요한 body를 자바스크립트 언어로 바꿔주는 함수가 json()임
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json()) // JSon body => JS 로 변환.
호출 순서 알아놓기!
