[Map, filter 메소드 사용]

map()

🧐 내용

배열을 순회하며 새로운 배열을 반환하는 JavaScript 메서드.

주로 리스트로 되어있는 컴포넌트를 렌더링할때 사용됨.

🛠️ 문법

Array 자료형에서 .map()을 사용하여 새로운 배열을 반환함.

괄호안에는 화살표 함수가 삽입되며, 함수의 첫 번째 인자는 리스트의 요소, 두 번째는 요소의 index, 세 번째는 array 자체.

요소들을 변경시킬 수 있음.

예시

export default function CommentList(){
    const comments = [
        {
            name : '김민성',
            comment : '하이 나 김민성'
        },
        {
            name : '박다온',
            comment : '리액트로 프로제트 만들고 있어요'
        },
        {
            name : '백도준',
            comment : '리액트 재밋다'
        },
    ]
    const [data, setData] = useState(comments)
    function deleteComment(id){
        setData(data.filter(item=>item.name !== id))
    }
    return(
        <div className="contentontainer">
            {data.map(item=>
                <Comment comment = {item} deleteComment={deleteComment} />
            )}
        </div>
    )
}

Comment에 다른 props를 주면서 반복적으로 컴포넌트를 생성할 수 있습니다.

👍🏾 장점

💡

가독성 향상

: for문보다 간결하게 사용하여 가독성이 높아짐

💡

원본배열 유지

: 새로운 배열을 반환하여서 원본배열을 유지할 수 있음

💡

체이닝 가능

: 다른 배열함수와도 같이 쓰일 수 있음(map, filter, reduce 등등)

---

filter()

🧐 내용

배열에서 특정 조건을 만족하는 요소만 필터링하여 새로운 배열을 반환하는 JavaScript 메서드.

주로 조건에 맞는 요소만 걸러내어 새로운 배열을 만들 때 사용됨.

🛠️ 문법

Array 자료형에서 .filter()을 사용하여 새로운 배열을 반환함.

호안에는 화살표 함수가 삽입되며, 함수의 첫 번째 인자는 리스트의 요소, 두 번째는 요소의 index, 세 번째는 array 자체.

return 문과 조건식을 세워서 어떤 요소들을 반환할지 찾을 수 있음.

array.filter((element, index, array) => {
  return 조건식;  // true인 요소만 남김
});

예시

const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // [2, 4, 6]

numbers 라는 배열에서 짝수들만 반환하도록 할 수 있음.

👍🏾 장점

💡

가독성 향상

: for문보다 간결하게 사용하여 가독성이 높아짐

💡

원본배열 유지

: 새로운 배열을 반환하여서 원본배열을 유지할 수 있음

💡

체이닝 가능

: 다른 배열함수와도 같이 쓰일 수 있음(map, filter, reduce 등등)

💡

간단 필터링

: if문 같은것을 사용하지 않고도 간단하게 필터링가능(조건부 렌더링도 가능)

---

[조건부 렌더링과 input]

1. 리액트에서 입력한 input 데이터를 useState를 사용하여 가져온 후 출력하는 방법을 작성하고,

사용 예를 정리하시오.

조건부 렌더링

조건부 렌더링이란?

if 문, && 연산자, 삼항 연산자, filter() 등을 활용하여 조건에 따라 컴포넌트 또는 HTML 요소를 표시하거나 숨길 수 있는 기능

예시

export default function ConditionR(){
    const [isLogin, setLogin] = useState(false);
    return(
        <div className={'box'}>
            {!isLogin ? <button className={'btn1'} onClick={()=>setLogin(!isLogin)}>로그인</button> :  <div>
                <p>환영합니다~~</p>
                <button className={'btn2'} onClick={()=>setLogin(!isLogin)}>로그아웃</button>
            </div>}

            <hr />
            <p>모두함께 리액트 공부</p>

        </div>
    )
}

해당 코드에서는 useState로 isLogin 상태를 관리하면서 isLogin이 true라면 환영합니다를 보여주고

isLogin이 false 라면 로그인 버튼을 화면에 표시해줍니다.

input

🧐 내용

input 태그에있는 useState 로 관리하기 위해서는 value와 onChange props를 활용해야합니다.

useState 선언 → value = {state} , onChange = {(e)⇒setState(e.target.value)} → state 태그에 삽입(p태그, div태그 등등)

• 이때 onChange 에는 화살표함수가 들어가야합니다.

예시

import './style.css'
import {useState} from "react";

function InputText() {
    const [value, setValue] = useState('');
    const handleClick = ()=>{
        setValue('');
    }
  return (
    <>
        <div>
            <input
                type={"text"}
                value={value}
                onChange={(e) => setValue(e.target.value)}
            />
            <button type={"button"} onClick={handleClick}>초기화</button>
        </div>
        {value &&
            <div className={"modal"}>
                <p>입력한 값은 <span style={{color:'red'}}>{value}</span> 입니다</p>
            </div>}

    </>
  )
}

export default InputText

useState에 빈 문자열을 선언 후

value={value}
onChange={(e) => setValue(e.target.value)}

로 값을 업데이트하고

태그안 < 태그에 값을 삽입하였습니다.