🎯 Instagram Main Page clone 돌아보기

1.Navbar

✍ 기록하고 싶은 것 : 검색 기능

1. 여러 인스타그램 계정의 정보가 담긴 Mock data를 fetch로 불러오기
2. 사용자가 입력한 keyword 저장하기
3. Mock data 내의 user id 중 keyword를 포함한 계정만 사용자에게 보여주기

이 한 가지 기능을 구현하기 위해서는 다양한 개념이 필요하다.
fetch, lifecycle, state, props, filter, map

🧾 구조 구상하기

❓Mock data를 어느 컴포넌트에서 불러올까?

자식 컴포넌트 중 한 군데에서만 이 정보가 필요할 것이기 때문에 부모 컴포넌트에서 직접 불러와서 props로 전달하기 보다는 자식 컴포넌트에서 직접 Mock data를 fetch로 불러오고 사용하는 것으로 결정했다.

❓ keyword는 어느 컴포넌트에 저장할까?

input tag는 부모 컴포넌트에, 결과는 자식 컴포넌트에서 작성할 것이다.
부모 컴포넌트에서 자식 컴포넌트로 keyword를 props로 전달해야 한다.

⛳ 각 컴포넌트가 할 일

Nav component

1. 사용자가 input창에 입력한 keyword 저장하고 자식 컴포넌트에 전달하기
   

SearchResult Component

1. render() 후 실행되는 componentDidMount()를 사용하여 Mock data를 fetch()를 통해 비동기적으로 불러오기

2. 불러온 data를 setState()를 통해 배열인 searchList update하기

3. update 된 searchList 중 부모로부터 props로 전달받은 keyword가 포함되어 있는 list만 filter() 사용하여 필터하기

• String.toLowerCase() : 문자열을 소문자로 변환해 반환
  -> 사용자의 입력값과 searchList내의 userId값의 case sensitive를 없애기 위해 두 문자열을 모두 소문자로 만들어 filter하기

• Array.indexOf() : 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환
  -> searchList내의 userId값 중 keyword와 일치한 요소만 찾기

• Array.filter() : 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환
  -> 찾아진 요소만을 가진 새로운 배열(filteredResult) 만들기

4. filter된 list의 결과는 배열이기 때문에 map()을 통해 배열의 요소를 반복적으로 생성하기

React의 map()에는 영혼의 짝꿍이 있다. 바로 key!

유일한 값이어야 하는 key는 컴포넌트 내 어떤 아이템의 변화/추가/삭제를 정확히 인지하기 위해 필요하다.

이게 왜 중요하냐?

리액트는 state 변경사항이 있는 부분만 재렌더링 해주는 똑부러진 친구이기 때문이다.

이 key값은 절대로 배열 내의 index를 사용해서는 안되고 변하지 않을 고유값으로 할당해 줘야 한다. Mock data로 불러온 searchResult의 경우에는 id 값을 가지고 있었기 때문에 이것을 사용해주면 된다.

만약 내가 만들어서 써야한다면?

정해진 것은 없지만 배열 내 마지막 요소의 id값 + 1을 해주거나 Math.random()을 활용하거나 Date.now()를 쓰면 되겠지만 ms 단위를 사용하는 마지막 방법은 복수의 사용자가 동시에 아이템을 추가 경우 중복될 가능성이 있다고 한다.

💭 What I learned from this..

Main page 중 기록하고 싶은 1번이 navbar serch box지만 제일 마지막에 이 기능을 추가하였다.

누가봐도 중요하고, 누가봐도 가장 자주 쓰일 것 같이 생긴 이 기능을 구현할 때, 코드 하나하나 메서드 하나하나를 온전히 이해하고 작성하기 위해 여러 개념들을 나름 완전히(으잉?) 공부 후 구현하였기 때문이다.

이번 clone 중에는 lifecycle 중 componentDidMount 함수만 fetch를 위해 사용하였지만 사실 성능 최적화를 위해 더 다양한 함수들이 필요하다.

버튼 누를 때마다 번쩍이는 박스들 이 눈에 너무 거슬린다.

미완의 clone이기 때문에 점진적으로 성능 최적화까지 해보자! 화이팅 :)