오늘 한 일
오늘은 드디어 무한 스크롤을 완성하면서 Search Page를 완성했다!
물론 즐겨찾기 기능을 추가해야하지만 중요 기능 하나를 완성해서 기분이 좋다.
원래 알던 지식에서 코딩했기 때문에 추가적으로 공부한 것은 많지 않다.
공부한 것
setState에 배열 추가
나는 이때까지 반복문을 이용해서 배열에 하나하나 값을 추가했다. (참고로 Search는 배열)
본인 코드: Search.forEach((item) => setMovieList((prev) => [...prev, item]))
그런데 ...prev처럼 배열도 넣으면 그냥 추가가 되는 것을 이제 알게 되었다.
=> 고친 코드: setMovieList((prev) => [...prev, ...Search])
논리 연산자 &&(AND)와 ||(OR) 활용법
원래는 코드를 간단하게 짤 수 있어서 삼항 연산자를 주로 사용했다.
그런데 논리 연산자가 javascript에서 어떻게 작용되는지 알면 더욱 간단하게 짤 수 있다.
먼저 ||(OR) 연산자를 보도록 하자.
원래 A || B 는 A 또는 B 중 하나가 true면 ture를 반환한다고 생각한다.
if 문에서 그렇게 많이 사용했으니 틀린 말은 아니지만, 조금 더 자세히 들어가면 다르게 활용할 수 있다.
OR 연산자는 -> 방향으로 참, 거짓을 확인하는데, 만약 A가 true면 true가 아닌 A를 반환하고 B는 확인하지 않는다.(A에서 이미 결과가 나왔기 때문)
그러면 코드를 하나 예시로 들겠다.
A ? A : B: 이런 코드가 있다고 보고 A가 문자열인지 null 값인지 알 수 없다. 이때 A가 문자열이면 true로 판단하기 때문에 A를 반환하고 null이면 false므로 B를 반환한다.
그런데 코드에 A가 반복되는게 괜히 불편하기 때문에 || 연산자를 이용해 코드를 줄일 것이다.
=> A || B 이렇게 하면 A가 문자열일 경우 true이므로 B를 보지 않고 A를 반환한다.
참고로 B는 무조건 true라고 가정한다.
&&(AND) 연산자도 비슷하게 활용할 수 있다. 바로 코드를 보자.
A ? B : null: 이 코드는 A가 있으면 B를 출력하고 없으면 null, 즉, 아무것도 출력하지 않는다.
=> A && B: && 연산자는 A와 B가 둘 다 true면 true를 반환하는데, 사실 A가 true인 것을 확인하고 B가 true인것을 확인하면 B를 반환하는 것과 같다. A가 false면 아무것도 없거나 0이기 때문에 아무것도 출력하지 않거나 0을 출력할 것이다.
null 병합 연산자인 ??도 || 연산자와 비슷하게 사용할 수 있다. 하지만 두 개의 연산 방식이 다르기 때문에 주의해서 사용해야 한다.
병합 연산자는 ??는 A ?? B가 있을 때 A가 null이나 undefined가 아니면 A를 반환하고 아니면 B를 반환한다.(아마 B도 null 이거나 undefined면 아무것도 출력 안할 것이다.)
|| 연산자도 null이나 undefined면 false기 때문에 비슷하게 작용하는데 밑을 보면 차이점을 알 수 있다.
let value = 0
let result = value ?? "정의되지 않은 변수"
console.log(result);
result = value || "falsy한 변수"
console.log(result);
// 결과
0
falsy한 변수
0인 경우 ||(OR) 연산자에서는 false지만 ?? 연산자에서는 null이나 undefined가 아니기 때문에 0을 출력하게 된다.
