array
리액트에서 array는 진짜 중요하다. 리액트를 제일 리액트스럽게 쓰는게 물론 state 값을 이용해서 onChange 해서 막 state 값을 리액트답게 설정하는 것도 있겠지만 리스트를 array로 다루면서 값들을 자르고 붙이고 하는 것도 리액트스러운 부분중에 하나인 것 같다.
map
const list = ['커피','물','주스'];
return (
<div>
{list.map((item,index) => {
return(
<div>
{index+1}. {item}
</div>
)
})
}
</div>
)
list를 각 항목별로 한번씩 돌리는게 map이다.
돌릴때 각 순번과 콘텐츠를 하나씩 가져올 수 있는데
그래서 위와 같이 설정하면 아래와 같은 화면이 나온다.
1. 커피
2. 물
3. 주스
const list = [{'음료':'커피','인원':2},{'음료':'물','인원':1},{'음료':'주스','인원':3}];
return (
<div>
{list.map((item,index) => {
return(
<div>
{index+1}. {item.음료} : {item.인원}
</div>
)
})
}
</div>
)
한단계 나아가 위와 같은 식을 만들면 item.키 값을 이용해서 밸류를 불러올 수 있다.
결과 화면은 아래와 같다.
1. 커피 : 2
2. 물 : 1
3. 주스 : 3
그럼 위 값의 추가와 삭제 기능이 필요할 것이다. 그 기능을 하는게 추가 concat 삭제 filter 다.
concat
배열.concat(추가값) 이렇게 설정하면 배열에 추가값이 설정된다.
const [list,setList] = React.useState([{'음료':'커피','인원':2},{'음료':'물','인원':1},{'음료':'주스','인원':3}]);
React.useEffect(() => {
setList(list.concat([{'음료':'콜라','인원':2}]));
},[])
1. 커피 : 2
2. 물 : 1
3. 주스 : 3
4. 콜라 : 2
1탄에서 언급한 useState, useEffect를 사용해보았다. 보통 이런 형태로 사용한다고 보면 된다.
useEffect 없이 useState 아래 그냥 setList를 사용하면 계속해서 호출돼서 오류가 생긴다.
useEffect를 통해 화면이 렌더링 된 후 한번 setList가 실행되도록 했다.
그리고 setList 안에 그냥 [{'음료':'콜라','인원':2}] 배열을 설정하면 list가 이 배열로 대체되지만
list.concat( ~ ) 하여 설정하면 기존 list에 해당 배열이 이어붙어진 형태가 list가 되어
list = list + 새 배열
이렇게 선언되는 결과가 되는 것이다.
처음에는 state값도 혼란스러웠는데 배열 추가도 이렇게 이중 삼중 거쳐서 선언해야된다는 것이 답답했지만
state값을 이렇게 빡세게 관리함으로써 보다 효율적인 state 값 위주의 부분 렌더링이 가능해지는 원리인 것 같다.
filter
filter는 사실 단순 삭제 기능은 아니다. concat은 역할만 본다면 단순추가가 맞지만 (useState 문법 떄문에 꼬여보이는 것) filter는 그야말로 필터, 즉 값을 거르는 기능이다. 그런데 이걸 어떻게 삭제에 사용할 수 있을까?
1)
const [list,setList] = React.useState(
[{'음료':'커피','인원': 2},{'음료':'물','인원': 1},{'음료':'주스','인원':3},{'음료':'레몬에이드','인원':1}]
);
setList(list.filter((item,index) => ( item.인원 > 1 )));
setList(list.filter((item,index) => { return item.인원 > 1 }));
이렇게 기준을 정해서 삭제할 수 있다. 지금은 인원이 1 초과인 것들만 기준을 정해서 남겼지만 이외에 id가 a가 아닌 것들로 기준을 잡아 a만 지운다거나 여러개의 id를 지우고 싶을 때는 id가 a가 아니고 && id가 b가 아니고 ... 이렇게 이어서 쓰면 된다. 여기서 or 인 || 를 쓰면 a는 b가 아니고 b는 a가 아니므로 둘다 안지워진다. 사소한 실수지만 헷갈리면 멘붕이니 적어본다.
setList(list.filter((item,index) => ( item.음료 !== '물' && item.음료 !== '레몬에이드' )));
1. 커피 : 2
2. 주스 : 3
2)
또는 index를 기준으로 자를 수 있는데 앞에서부터 0,1,2,3 ... 이렇게 0부터 시작한다는 것을 기억해야 한다.
setList(list.filter((item,index) => ( index < 2 )));
1. 커피 : 2
2. 물 : 1
3)
여기서 더 나아가면 0~3 중 2를 삭제하고 싶을때는 어떻게 해야하지 싶은 경우가 생길 수 있다. 그럴땐 filter와 concat을 둘다 이용해서 쓰면 된다. 물론 slice, push, pop 등 다른 함수도 있지만 나는 가장 기본적인 concat과 filter만 가지고 작업해보려고 한다. 그리고 가끔 slice 쓰니까 이상하게 작업 순서가 뒤로 밀리거나 하는 경우가 있었어서 나는 filter와 concat을 가지고 하는 편을 선호한다.
setList(list.filter((item,index) => ( index < 2 )).concat(list.filter((item,index) => (index > 2))));
1. 커피 : 2
2. 물 : 1
3. 레몬에이드 : 1
여기서 주의해야할 점은 filter와 concat과 filter를 섞어쓰다보면 헷갈릴 수 있는데 정 헷갈리면 각 filter한 array를 따로따로 두고 concat 하는 것도 괜찮다.
let list2 = list.filter((item,index) => ( index < 2 ))
let list3 = list.filter((item,index) => ( index > 2 ));
setList(list2.concat(list3));
+ 삼항 조건 연산자
삼항 조건 연산자 - 이하 삼항문 - 도 하나로 크게 다루자면 길게 할 수 있지만 이번 리액트 정리편은 무조건 기초 이해 및 바로바로 쓸 수 있기 위한 정리이므로 간단하게 적어본다.
보통 조건문이라고 하면 우리는 if 나 switch 같은 것들을 생각하고 if가 매우 익숙하지만 리액트에서는 삼항 조건 연산자를 많이쓴다. 자바스크립트도 그렇다고 한다면 그럴 수 있겠는데 내 경우에는 자바스크립트 전에 제이쿼리로 써서 그냥 if로 조건설정해줬었어서 삼항 조건 연산자가 너무 어색했다.
하지만 잘만쓰면 if 보다 훨씬 효율적이고 간편한게 삼항 조건 연산자다.
조건식 ? 참일 때 결과값 : 거짓일 때 결과값
이런 형태를 가진다. 처음에는 참이 앞이 맞는지 많이 헷갈렸는데 참과 거짓 중에 무조건 좋은건 참이고 좋은게 앞에 온다고 외웠다. 이제는 많이 써서 굳이 그런 기억을 떠올리지 않아도 참이 앞으로 오는게 자연스럽다.
setList(list.filter((e,i) => (e.음료 === '물'? e.음료 = '스프링워터' : e.음료 = e.음료)))
식을 응용해서 이렇게 적어보면 아래와 같은 결과가 나온다. 음료가 물일 때만 스프링워터로 바꾸고 나머지는 그대로 리스트를 작성하는 것이다. 예제를 보이고자 억지로 써본 식이어서 굳이 이렇게 써야하나 싶겠지만 리액트를 하다보면 삼항 조건 연산자가 찰떡이고 있어서 다행이다 싶은 경우가 생긴다. if가 불가능한 경우? html 사이에서 중괄호를 써서 변주를 줘야할 때 쓰기도 좋다.
1. 커피 : 2
2. 스프링워터 : 1
3. 주스 : 3
4. 레몬에이드 : 1
const e = [{'name':'K','score':93},
{'name':'L','score':26},
{'name':'P','score':84},
{'name':'C','score':92},
{'name':'H','score':35},
];
return (
<div>
{
e.map(i => {
return(
<div>
name {i.name} / score {i.score} / result {i.score >= 75? 'P' : 'F'}
</div>
)
})
}
</div>
)
name K / score 93 / result P
name L / score 26 / result F
name P / score 84 / result P
name C / score 92 / result P
name H / score 35 / result F
이렇게 간단하게 조건식을 만들고 결과를 낼 수 있다는 장점이 있고 html 사이에 쓰기도 간편한 삼항 조건 연산자! 여러가지 상황에서도 곧잘 쓰이고 활용 가능하니 꼭꼭 익숙하지 않다고 버리지 않고 기억하고 많이 써보도록 하길 추천한다. 리액트를 더 리액트스럽게 쓰기 위해서!
댓글