React find Method
모의 프로젝트를 만들면서 구성한 디렉토리구조는 다음과 같다.
src폴더안에 component라는 폴더를 만들고 목적에 맞는 list라는 폴더안에 별도로 api / react-query / view를 담당하는 component 이렇게 만들었다. 그리고 난 뒤에 api부분에는 실제 api를 붙이지않고 더미데이터를 만들어 처리 했다.
우선 구조를 살펴보면 listApi 라는 객체를 만들어 각각에 필요한 것들을 외부에서 꺼내서 사용할 수 있도록 설계하였다.
각각의 메서드들에 맞는 useQuery를 만들어 준 뒤에 성공을 했을 때 보여주는 view컴포넌트에 가보면 props를 준 다음 전체 게시글을 가지고 오는 데이터들을 조회 해봤을 때, 아래와 같이 나오는 것을 볼 수 있다.
그런데 사실 css적인 요소를 다 빼고 생각해본다면 postTypeId와 postCategoryId의 값들이 저렇게 number 타입으로 보여지는게 맞을까? 라는 생각이든다. 왜냐하면 유저의 입장에서는 저렇게 데이터가 내려와서 마운트가 됐을 때, 웹에 보여진다면 저런 숫자가 의미하는 것을 잘 모를뿐더러 명확하게 구분을 할 수 없다는 것이다. 그래서 listApi 라는 객체안에 만들어놨던 getPostType과 getCategory를 조회하는 query를 통해 각각의 id값과 게시글을 조회했을 때의 post가 가지고 있는 postCategoryId / postTypeId 값을 가지고 일치한다면 각각의 아이디가 가지고 있는 값들을 보여줘야 겠다라고 생각했다.
하지만 자주 사용해봤던 배열메서드는 map밖에 없었는데, 오늘 새롭게 공부하며 사용한 find 배열메서드를 설명하고자 한다.
우선 find 메서드는 -> " 배열 내에서 조건식을 만족하는 값 " 을 찾을 때 사용한다.
예시를 들어본다면,
const [data, setData] = useState([
{id : 1, name : Jone}
{id : 2, name : Mikle}
])
// 이렇게 data안에는 객체가 2개가 있다.
// 여기에서 find를 사용하여 원하는 아이디 값에 접근을 한 뒤 원하는 key값의 value를 가져올 수 있다.
data.find((value) => value.id === 1).name
useState를 만든 후 data 콘솔을 찍는다면 2개의 객체값들이 나올 것이다. 배열로 감싸있기 때문에 배열메서드 find를 사용하여
data라는 배열안에 각각의 키값을 돌며 위의 조건인 value(data값들)의 id 키에 접근하여, 그 아이디가 1과 같다면 그 객체가 가지고 있는 name을 추출하는거라고 볼 수 있다. 이런 식으로 접근하여
게시글 타입과 게시글 카테고리에 각각의 아이디값들이 가지고 있는 값들을 표현해서 좀 더 나은 데이터처리를 하게 되었다.
프로그래머스 문제를 풀 때 검색해서 한번씩 써봤던 find 메서드 였지만, 이렇게 프로젝트를 하며 필요에 의해, 사용법을 검색하고 사용해보니 자주 사용할 것 같다는 생각이 들었다. find 메서드를 10번 이상 반복하면서 적어보고 내걸로 만들어야겠다.