Today I Learned (TIL)

23.11.30 리액트 필수 배열 API(filter,map)

폼폼코 2023. 11. 30. 18:24
728x90
반응형

리액트를 이용하여 필수 배열 API를 적용해보는 웹페이지를 생성해보았다 그중에 가장 중요한 fliter,map

Result 부분 결과 반영을 위한 State 구조

기본으로 사용하는 배열 사과 바나나 등등 과일들은 arry의 초기값안에 initialState에 넣어주었다

리액트에서 변수를 바꾸는 방법은 setState뿐이라 그렇다

 

const [query, setQuery] = useState(""); input에 입력을 해주기위한 State 초기값은 "" 로해놔서 빈칸이다

이해 안갈때는 직접 아무거나 넣어봐서 실험하는게 가장 이해가 빠른거같다 

 <h1>Array API Practice</h1>
      <div>
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
//onChange={function (e) {
            setQuery(e.target.value)
            }}  // 화살표 함수 미적용 코드 (작동은 똑같음)
          placeholder="Enter text"
        />
      </div>
 

인펏에 항상 넣어주는건 value 와 onChange(우리가 입력한값이 여기에 적용){온체인지 안넣으면 입력안된다}

input 에 입력값을 state에 집어넣어주는 코드 입력값은 {querry] 라고 정했다 아무이름이나 넣어도 괜찮다

consol.log(e)
 

온체인지 부분을 보면 항상 e.target.value 가 들어가는데 위에 사진이 e(이벤트) 값에 들어있는걸consol.log로 찍어본것이다 엄청 여러가지 들어가는데 여기서 실제 사용할건 target 이제 막 배우는 초반에는 (e.target.value) 외우는게 조금 편하다

그래서 적용되는 순서를 살펴보면  input에 우리가 타자를 입력함 -> (e.target.value) 발생해서
 setQuery가 받아냄  -> setQuery가 qurery를 바꿔줘서 input창에 표시됨
 

Filter

(입력된 값을 조건에 맞춰서 걸러준다(필터링))

index는 사용하지않아서 색깔이 희미하다 그래서 빼도 상관없다

화살표 함수적용후(동작은 똑같음)=> (return문이 한줄이면 중괄호{} return 생략가능하다)

const handleFilter = () => {
    const filtered = array.filter((item) => item.includes(query));
    setResult(filtered.join(", "));
  };
 

const filtered 는 = query 값에 a가 들어왔을때 filter 가 array값에 a가 있는지 없는지 판단해서 includes 가 a가 들어있는 값(ture)면 반환하고 아니라면(false)반환하지 않음

(.includes() 메서드는 요소가 배열 안에 존재하는 경우에만 true 을 반환합니다.) 

결국 a가 들어있는 {Result: apple, banana, date} 출력해냄

MAP

(하나 하나 순회하면서 특정 조건으로 바꿔줌)

리턴 1로 해달라하니 1이 5개

맵을 사용하면 일단은 그 배열안에 갯수만큼 무조건 가공해서 반환해준다 banana->1 로 바꿔버림

return 안써주면 undefined 5개나온다

toUpperCase를 이용해 대문자로 가공후 반환해줌

const handleMap = () => {
    const mapped = array.map((item) => item.toUpperCase());
    setResult(mapped.join(", "));
  };
 

화살표 함수로 조금 줄여보았다

filter와 map을 동시적용하는 경우

대표초기값을 객체가 3개들어있는 배열 exData를 가정하고

 

isDeleted 가 false (삭제가 되지않은 데이터가 필요할때)

일단 필터를 이용해서 삭제된것 (item.isDeleted === true) 는 return fals로 걸러주고 삭제 안된것만 true로

그후 바로 map으로 (mappedItem){이거 이름 그냥 a로해도 상관없음} 인자를 받은뒤

값을 반환해준다

이런식으로 반환
 

제목1은 isDelted가 true (삭제된값) 이기에 화면에 나오지 않는다

실제로 외부에서 데이터를 받아오는 작업을할때
이런식으로 많이 사용한다한다
그만큼 필터와 맵이 매우매우매 중요하다

배열 API 를 복습하다 filter 와 map의 중요성을 느껴 따로 한번 정리해 보았다 나머지 문법들

<div>
        <button onClick={handleForEach}>forEach</button>
        <button onClick={handleFilter}>filter</button>
        <button onClick={handleMap}>map</button>
        <button onClick={handleReduce}>reduce</button>
        <button onClick={handlePush}>push</button>
        <button onClick={handlePop}>pop</button>
        <button onClick={handleSlice}>slice</button>
        <button onClick={handleSplice}>splice</button>
        <button onClick={handleIndexOf}>indexOf</button>
        <button onClick={handleIncludes}>includes</button>
        <button onClick={handleFind}>find</button>
        <button onClick={handleSome}>some</button>
        <button onClick={handleEvery}>every</button>
        <button onClick={handleSort}>sort</button>
        <button onClick={handleJoin}>join</button>
      </div>
 
 

얘네들은 뭔지만 알고 나중에 기억해내서 찾아서 사용하는 방식으로 사용하면 편하다고 한다

코딩을 배울때 전부 외워서 사용하는건 불가능하다고 첫 수업부터 들었는데 왜그런지 점점 알아가는 중이다

그래도 filter와 map은 엄청 자주 사용하니 따로 한번 정리해본 날이였다

728x90
반응형