[REACT]0103

●연산자

-조건(삼항) 연산자

pages > 1000 ? "over a thousand" : "less than 10000";

//첫번째 부분(pages>100): 상태
//두번째 부분: 상태가 참일 경우 보여줌
// 3번째 부분: 상태가 거짓일 경우 보여줌

 

 

-논리 연산자 (&& )

왼쪽에서 오른쪽으로 평가할때 연산자는 처음으로 만나는 거짓같은 피연산자의 값을 반환 

만약 모두 참이면 마지막 피연산자의 값을 반환함

//AND연산자는 불리언이 아닌 값을 보존함 

result=''&& 'fff' //''빈문자열 반환
result = 2&&0 //result에 0이 나옴

 

 

 

●Arrow Function

-함수 작성하는 방법

 

인수, 화살표 , 반환하려는 항목

//일반 함수식
/*function getYear(str) {
  return str.split("-")[0];
}*/

//화살표 함수
const getYear=(str) => str.split("-")[0];
console.log(getYear(publicationDate));

let sub= (first,second)=>first=second;

 

괄호 () 안에는 기존 함수에서 사용하는 파라미터 넣기 

=> 다음 {}에는 반환하고 싶은 내용을 적으면 된다.

 

 

 

● Optional Chaining

뭔지 이해가 잘 안가서  다른 사람들이 정리 해놓은걸 찾아봤다.

- elvis연산자라고 알려져있고 선택적 연결을 할 수 있도록 도와줌 : ?.  이 기호를 사용함

연산자는 존재 또는 존재하지 않는 요소와 메서드들을 안전하게 접근할 수 있도록 도와준다.

function getTotalReviewCount(book) {
  const goodread = book.reviews.goodreads?.reviewsCount ?? 0;
  const librarything = book.reviews.librarything?.reviewsCount ?? 0;
  return goodread + librarything;
}
console.log(getTotalReviewCount(book));


// 옵셔널 체이닝 이전 
let book= reader &&reader.date&& reader.date.title;
book=reader?.date?.title;

//options객체에서 onSuccess속성이 없을 경우 undefined반환
 const onSuccess=options?.onSucess;
 
// 아래 코드는 onSuccess 값이 undefined 여도 오류를 발생하지 않음
onSuccess?.();

// 체이닝을 사용해 문장 구문을 줄일 수 있음
options?.onSuccess?.();

// options 객체의 onSuccess 속성이 존재할 경우,
// 호출 전에 추가적인 옵셔널 체이닝 연산자(?.)를 붙히지 않는 것이 좋음
// 오직 왼쪽에 있는 항목이 존재하지 않을 수도 있는 경우에만 체이닝 연산자(?.)을 사용하는 것을 권장
options?.onSuccess();

 

 

 

 

● (중요) 3가지 기능적 배열 메서드 

기능적 배열 메서드 : 원래 배열을 변화시키지 않고 그 배열을 기반으로 새 배열을 반환함

 

1.map() - 매핑 매서드

map메서드의 역할  

자바스크립트의 내장 함수

반복되는 컴포넌트를 렌더링하기 위해 사용됨

 

배열의 각각의 요소에 일부 연산만 적용함

var con=[1, 2, 3, 4].map((el) => el * 2);
console.log(con) //con의 값으로 2,4,6,8을 얻을수 있다.

const movies = movies.map((moives) => movies.title);
movies; //movies에 대해서 영화 제목들만 모아서 추출할 수 있음

 

 

여러개의 값을 묶는 경우 

const essentailData = movies.map((movies) => ({
  title: movies.title,
  director: movies.director,
  reviews: getTotalReview(movies),
}));
essentailData;

 

 

 

2.filter() - 필터 매서드

프론트 엔드 개발은 데이터 작업과 연관이 있기 때문에 이 메소드에 대해서 잘 아는 것이 중요함

const romanticmovies = movies
  .filter((movies) => movies.genres.includes("romantic"))
  .map((movies) => movies.title);
romanticMovies;

//여러 데이터 중에서 장르를 로맨스 영화를 가진 것을 추출

 

 

3.reducer() - 축소 매서드

 

 

- 가장 다 용도적이고 강력한 메서드 

- 전체 배열을 하나의 값으로 축소함

-reducer(함수값, 시작값)

 

 

●메서드 사용법

  filter :  이전 배열보다 길이를 짧게 만드는 메서드 

  map  : 이전 배열보다 길이를 길게 만드는 메서드 

 

 

//배열 요소 추가, 삭제 업데이트
//책 객체를 배열에 추가
const newMovie = {
  id: 6,
  title: "harry potter",
  author: "j.k.롤링",
};
const moviesAfteradd = [...movies, newMovie];
moviesAfteradd;

const deleteMoMvies = moviesAfteradd.filter((movies) => movies.id !== 3);
deleteMovies;

const updateMovies = deleteMovies.map((books) =>
  movies.id === 1 ? { ...movies, runningtIime: 120 } : movies
);
updateMovies;