[리액트] map, filter, key, concat, 삼항연산자
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
render() {
const { isLoading, movies } = this.state;
return (
<section className="container">
{isLoading ? (
<div className="loader">
<span className="loader__text">Loading...</span>
</div>
) : (
<div className="movies">
{movies.map((movie) => (
<Movie
key={movie.id}
id={movie.id}
year={movie.year}
title={movie.title}
summary={movie.summary}
poster={movie.medium_cover_image}
genres={movie.genres}
/>
))}
</div>
)}
</section>
);
}
|
cs |
map
아래 코드는 movies라는 배열 안을 돌면서 Movie라는 컴포넌트를 생성하며 이 컴포넌트의 props 값으로 배열의 요소를 넣어주고 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div className="movies">
{movies.map((movie) => (
<Movie
key={movie.id}
id={movie.id}
year={movie.year}
title={movie.title}
summary={movie.summary}
poster={movie.medium_cover_image}
genres={movie.genres}
/>
))}
</div>
|
cs |
-리액트에서는 반복문을 만들 때는 map이라는 메서드를 활용해야 한다.
-map은 array의 각 item에 function을 적용하고 array를 반환한다.
-같은 컴포넌트에 값을 다르게 적용해야 할 때 map을 쓴다.
-map을 쓸 때는 반드시 key값을 추가해주어야 한다.
key
-같은 컴포넌트가 여러 개 있는 경우에 key값으로 컴포넌트를 구분해주어야 배열이 삭제되거나 수정될 때 오류가 나지 않는다.
-리액트는 key를 기준으로 같은 컴포넌트인지 아닌지를 판단하기 때문에 화면에 표시되지 않지만 고유한 값이어야 한다.(중복 불가)
filter
원본은 유지하면서 배열에서 특정 데이터를 필터하거나 제거할 때 사용하는 메서드이다.
concat
contents에 concat을 이용해서 새로운 데이터를 추가해준 후 _contents라는 변수에 할당해준 다음,
setState에서 contents: _contents 에서 업데이트 해준다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<CreateContent
onSubmit={(_title, _desc) => {
this.max_content_id = this.max_content_id + 1;
const _contents = this.state.contents.concat({
id: this.max_content_id,
title: _title,
desc: _desc,
});
this.setState({
mode: 'read',
selected_content_id: this.max_content_id,
contents: _contents,
});
}}
></CreateContent>
|
cs |
배열에 데이터를 추가할 때는 push를 쓰면 안되고 원본 배열을 유지하기 위해 concat으로 원본 배열을 복제한 후 추가해주어야 한다.
또는 es6 spread 문법을 써서 새 변수에 기존 배열을 복제한 후 데이터를 추가해주어야 한다.
이전 state(원본)와 현재 state(원본+a)가 달라야 새로 렌더링이 된다.
리액트에서 중요한 것은 불변성을 유지해야한다는 것이다!
(원본을 유지하고 복제해서 사용해야함, 그래야 리액트가 이전과 비교해서 어떤 것이 달라졌는지를 캐치할 수 있음)
자바스크립트 es6 map, filter, concat
조건문
리액트에서 조건문을 쓸 때는 if 대신 삼항연산자를 쓴다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<section className="container">
{isLoading ? (
<div className="loader">
<span className="loader__text">Loading...</span>
</div>
) : (
<div className="movies">
{movies.map((movie) => (
<Movie
key={movie.id}
id={movie.id}
year={movie.year}
title={movie.title}
summary={movie.summary}
poster={movie.medium_cover_image}
genres={movie.genres}
/>
))}
</div>
)}
</section>
|
cs |
isLoading이 true이면 'Loading...'이 출력,
false이면 Movie 컴포넌트를 생성하는 조건문이다.