수업시간에 배운 내용

1. 리액트 디자인 패턴(컨테이너 - 프리젠터)
(1) 리액트에서 코드짜는 방식은 상당히 자유로운 편이다. 이런 자유도가 개발자에게 좋을때도 있지만 코드가 길어지거나 할때는 가독성이 매우 떨어진다.
(2) 이런 단점을 보완하는 방법 중 하나는 디자인 패턴을 사용하는 것이다. 그 중 대표적인 컨테이너 - 프리젠터 패턴이 있다.
(3) 컨테이너 : 우리가 배운 내용에서는 자바스크립트 쪽이 해당하며, API 요청, setState등 로직들을 처리한다. (데이터를 받아와서 처리)
(4) 프리젠터 : 컨테이너가 처리한 데이터들을 뿌려주는 역할을 한다.
(5) 폴더의 구성은 아래 사진과 같이 구성하며, 우리는 쿼리문까지 분리 된 상태.

(6) 즉 위의 폴더가 하나의 페이지라고 보면 된다. 실무에선는 한 파일의 코드가 70 ~ 100줄 정도로 관리한다고 한다. 이렇게 되면 유지보수 측면에서 효율성이 올라가는것 같다.

2. props
(1) 부모 컴포넌트가 자식 컴포넌트에게 값(함수, 변수) 등을 전달할때 사용된다.
(2) 부모가 자식한테만 줄수있고 객체(key : value)로 넘겨준다.
(3) 우리가 배우는 리액트에서는 부모가 자식한테만 주는 단방향이다. (양방향도 있긴하지만 양이 많아 질수록 복잡해진다고 함...)
(4) 컨테이너에서 로직에 대한 부분을 다루기 때문에 UI 쪽인 프리젠터 쪽에서는 onClick, onChange 같은 함수를 달아줄수가 없다. 이때 props 를 사용하여 전달하여 사용 할 수 있게 된다.


(위와 같이 컨테이너 쪽에서 할당해주고, 프리젠터 쪽에서 props.함수명 으로 정해주면 된다.)

3. setState 동작원리
(1) setState로 인하여 내용이 바뀌면 화면을 전체적으로 다시 그려준다. 이를 리렌더링 이라고 한다.
(2) 그렇다 보니 setState를 여러줄에 나눠서 작성할 경우 이때마다 계속 리렌더링이 일어나기 때문에 성능상 문제도 발생할 수 있고, 효율적이지 못하다.
(3) 따라서, 리렌더링을 최소화하기 위해 setState가 발생할 경우 한번에 같이 일어나게 하면 효율적으로 관리할 수 있게 된다.

4. 참같은 값 / 거짓같은 값
(1) 자바스크립트에서 참같은 값은 불리언을 기대하는 문맥에서 true로 평가되는 값이다. 반대로 거짓같은 값은 false로 평가된다.
(2) 이때, 거짓같은 값을 제외한 값은 모두 참같은 값으로 평가된다. 알아보자면
false : 말 그대로 false / 0 : 0이 아닌 1은 다 참같은 값 / 빈문자열 : "" 같이 빈문자열을 말한다. (하지만 " " 처럼 스페이스를 이용한 공백은 제외) / null, undefined / NaN 등이 있다.
(3) || 기호를 이용한 OR 연산자는 참같은 값을 찾아 반환한다. 제일 먼저 참인 것 같은 값을 반환한다는 뜻이다.
(4) && 기호를 이용한 AND 연산자는 거짓같은 값을 찾아 반환한다.

const and = 1 && 2 && null && undefined

위 AND 연산자는 undefined까지 도달하지 않고 null이 대입된다. 1과 2는 참인 값이므로 지나치고, 그 다음으로 거짓으로 평가되는 값인 null이라서 해당 값이 대입된다.