092424 til

복습

 

map 과 forEach 의 차이점 

 

map은 배열의 각요소를 변환 하여 새로운 배열을 반환 

 

forEach 각 요소를 순회하며 별도의 반환 값이 없음 

 

 

기존배열을 복사하는 연산자는 spread operator 스프레드 연산자 

 

화살표 함수 문법 

(매개변수)=> {함수 본문}

---

베이직반 4회차 .

 

useState 

비동기 

 

setState 로 상태를 업데이트 하면 

 

바로 바뀌지 않는다 

 

 

useState로 상태를 변경하면 바로 바뀌는 게 아니라,

 

React가 렌더링을 다시 할 때 바뀐다 

 

그래서 상태를 업데이트하고 바로 그 값을 확인하려고 하면,

 

아직 업데이트되기 전의 값이 나올 수 있다 . 

 

그래서 콜백 함수를 사용한다 

 

왜 ? 

 

이전 상태 값을 안전하게 읽고

 

그 값을 기반으로 새로운 상태를 설정할 수 있다 .

 

const [count, setCount] = useState(0);

// 콜백 없이 상태 업데이트할때 
setCount(count + 1);
setCount(count + 1); //  이러면 2가 안나옴 

// 콜백 함수 사용할때 
setCount(prevCount => prevCount + 1);
setCount(prevCount => prevCount + 1); // 이러면 2가 나옴 

 

prevCount 는 항상 최신 값을 참조 하기 떄문에  중요하다

 

콜백함수 의 필요성 

 

콜백함수는 상태 업데이트 시 이전 최신 상태 값을 참조 할 수 있게 해줌 

 

Delete 에 필요한 요소 

 

배열을 순회하면서 원하는 항목을 찾으면 제거 

 

filter method 를 쓴다 

 

filter method 란 ? 

 

배열에서 특정 조건에 맞는 요소들만 새로운 배열로 만들어주는 메서드다 

 

조건을 충족하는 요소는 남기고, 충족하지 않는 요소는 배열에서 제외한다 

 

원본 배열은 변하지 않는다 

 

조건에 맞는 요소들만 배열에 남는다 

 

예시 :

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

// 짝수만 찾기 
const evenNumbers = numbers.filter(number => number % 2 === 0);

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

 

 

 

 

삼항연산자 

 

3개의 항 

 

조건에 따라 두 가지 값 중 하나를 선택할 수 있게 해주는 연산자다 

 

if 문을 간단하게 표현할 수 있는 방식이라고 생각하면 됨 

 

쓰는 방버

 

조건 ? 참일 때 값 : 거짓일 때 값

 

 

삼항 연산자는 "만약 이 조건이 맞으면 A, 아니면 B" 다 

 

조건이 참이면 ? 뒤에 있는 값이 선택되고, 거짓이면 : 뒤에 있는 값이 선택됨 

 

 

초보인가 ?  예 : 아니오 

 

 

 

조건이 참이면 ? 뒤의 값을 선택하고,

조건이 거짓이면 : 뒤의 값을 선택하는 방식이다

 

 

리액트에서 삼항연산자를 활용하는법 

 

 

삼항연산자를 사용 하여 컴포넌트의 렌저링을 조건에 따라 변경할수있다 

 

이것을 조건부 렌더링이라고한다