2021.07.12

shong1332·2021년 7월 19일
0

codecamp

목록 보기
5/9

1. props

부모 컴퍼넌트에 있는 어떠한 값을 자식 컴퍼넌트에 넘겨 줄때 props를 사용하게 되는데,
이때 props는 객체의 형태로 전달 되게 된다.
이는 파일을 나누고서 함수식등을 전달할때 요긴하게 쓰이게 되는데
우리가 코드를 효과적으로 나누기위해 나눠 놓은 Container, presenter, querise.tsx파일 하나하나가 컴포넌트이기 때문이다.

모든 파일 하나하나가 컴포넌트이다. 함수형

자식 컴퍼넌트인 BoardList 에게 data 및 2개의 함수를 넘겨준 모습이다.

이로서 우리는 props를 통해 함수와 데이터를 보관,관리할 수 있는 파일한개와
html 역활을 하는 파일 하나로 나누어 관리 할 수 있게 되었다.

2. map

classmates에 값이 변한것을 알 수 있다.

우리는 초창기 for 문을 통해 각 배열의 인덱스 값에 접근하여 그 값을 수정하는 방법을 배웠다.
그리고서 드디어 이름만 들어본 .mpa() 메소드를 접하게 되었다.
map은 반복해서 데이터를 가공할때 쓰이게 되며 이때 가공되는 데이터는 배열이여야 한다.

1. 특징

  1. map을 다 돌게 되면 maping된 데이터가 다시 그 배열에 들어가게 된다.

  2. 특정 변경사항(+'어린이')을 모든 배열에 동시에 적용하게 된다.
    1.. 엄밀히 따지만 순서가 있느나 결과적으로 다 변하게 된다
    2.. 이때 원본이 바뀌게 된다.

  3. 배열안에 객체가 들어간 경우 객체를 바꾸게 되는데 객체로 들어왔다고 무조건 객체로 나가는것 아니다.
    객체로 왔다 배열로 나가기도 한다.

  4. 객체를 배열로 만들어 줄 수도 있음

2. 활용법

  1. 스프레드 연산자를 활용하면 조금더 편하게 map을 활용 할 수 있다.

...data를 활용하여 번거로운 타이핑 작업을 최대한 줄여보도록 하자.

  1. 우리가 실무에서 사용하게 되는 api는 배열안에 객체의 형태로 담겨져 오게 되는데
    이때 map 메서드를 html 태그와 함께 사용할 수 있다.

3. Filter

맵의 단짝친구로서 결국 배열을 관리하는 메서드이다.
<이 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.>
라고 적혀 있는데 이를 다양하게 활용 할 수 있다.

1. 특징

  1. 쓰는 방식은 맵과 거의 비슷한데 맵과의 차이점은 조건이 있어 이 조건을 통과하는 배열들만 다시 모아 새로운 배열을 반환하게 된다는 점이다.
    1.. 조건을 통과하지 못하는 값은 버리게 된다.

  2. 필터의 목적은 변경이 아니라 어떠한 값을 남기고 나머지 값을 삭제하는데 의의가 있다.

  3. 필터는 원본이 유지되게 된다.

필터링을 통해 11세 이상의 '영희,훈이'를 얻었지만 다시 classmates를 다시 찍어보게 되면 막둥이 훈이까지 3총사가 완성되어 있다.

2. 사용법

  1. 필터링을 통해 얻은 값은 객체의 형태이다.

필터링을 통해 얻은 객체를 다시 맵핑하여 필요한 값을 얻을 수 있다.

profile
prototype

0개의 댓글