[TIL]2022.10.05

오늘 한 일

JS스터디 
리액트 기초강의 인프런에서 듣기 -- 완료
벨로퍼트 문서 보기 -- 진행중
패스트캠퍼스 + 노마드 리액트  ---  위에 두개 끝내고 여유되면
입문주차 개인 과제 완료코드 이해하기 // 손코딩 반복 -- 완료

오늘 느낀 것

옵셔널 체이닝 예시 id : list[list.length-1]?.id +1 || 0

 

Hooks
- 함수 컴포넌트에서 클래스 컴포넌트와 같은 기능을 쓰게해줌 
- state, Lifecycle에 따른 기능 추가
- 사용자에 따라 만들 수도 있음 (use 붙여서)

종류 
- useState : 함수형에서 state를 사용하게 해줌
리렌더링을 해줘야 화면에 나타남 

- 사용법
const[변수명,set함수명] = useState(초기값);
return값으로 배열 

변수 각각에 대해 set함수 

- useEffect : Side effect를 수행하기 위한 Hook
Side effect - 부작용 // 의도치 않은 코드가 실행되는 경우 // 효과, 영향
서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 경우
다른 컴포넌트에 영향을 미칠 수 있으며, 렌더링 중에는 작업이 완료될 수 없기 때문
리액트 함수 컴포넌트에서 사이드로 실행 된다는 의미

- 사용법
useEffect(이펙트 함수, 의존성 배열);
useEffect(이펙트 함수, []); mount와 unmount 시 한 번씩만 실행하게 하는 법
의존성 배열을 생략하면 컴포넌트가 업데이트 될 때 마다 호출 됨 
의존성 배열 - 이펙트가 의존하고 있는 배열 
props와 state에 접근 할 수 도 있음

return () => {
 // 컴포넌트가 마운트 해제되기 전에 실행됨
}

- useMemo : Memoized value 를 리턴하는 Hook
Memoization - 최적화 ,  즉 연산량이 높은 함수의 호출 결과를 저장해 놓았다가 새로 함수를 호출하지 않고
이전에 사용한 함수를 바로 반환. 시간도 짧아지고 불필요한 중복연산도 없음 
Memoized value -- 결과값

- 의존성 변수에 들어있는 배열이 변했을 경우에만 결과값을 반환함 
- 렌더링이 일어나는 동안 일어남 
ex) 사이드 이펙트 같은 경우를 넣으면 안됨 서버에서 데이터를 받거나 DOM을 수동으로 바꾸는경우 XX

의존성 배열을 넣지 않을 경우 매 렌더링마다 함수가 실행 됨


- useCallback : useMemo()와 유사하지만 값이 아닌 함수를 반환
- 의존성 변수에 들어있는 배열이 변했을 경우에만 함수를 반환함 

- useRef : Reference를 사용하기 위한 Hook
특정 컴포넌트에 접근할 수 있는 객체
컴포넌트가 마운트 해제전까지는 유지됨
변경가능한 커런트값을 가진 하나의 상자

내부의 데이터가 변경되었을 때 별도로 알리지 않는다 
Callback ref -- 사용


Hook의 규칙

무조건 최상위 레벨에서만 호출해야 한다. 
-- 함수컴포넌트의 최상위

컴포넌트가 렌더링될 때마다 매번 같은 순서로 호출되어야 한다.

함수 컴포넌트에서만 Hook을 호출해야 한다.

custom hook 만들기

꼭 use로 시작해야 한다
여러 개의 컴포넌트에서 하나의 커스텀 훅을 사용할 때 컴포넌트 내부에 있는 
모든 state와 effects는 분리되어 있다.
각 커스텀 훅의 호출 또한 완전히 독립적이다.

훅들 사이에서 데이터를 공유하는 방법.

------------------------

conditional rendering 어떠한 조건에 따라서 렌더링이 달라지는 것
Truthy = true는 아니지만 true로 여겨지는 값
falsy = false는 아니지만 false로 여겨지는 값
Element Variables - 엘리먼트를 변수처럼 다룸

inline if 조건문을 코드안에 집어넣는것
if문의 경우 && 연산자를 사용
ex) 조건.length > 0 &&  조건의 렝스가 0보다 크면 출력
단축평가

if-else 
삼항연사자를 사용
조건 ? true면 리턴 : false면 리턴 

컴포넌트를 렌더링하고 싶지 않다면 null을 리턴

----------------------------

아이템들을 구분하기위한 key
map함수 안에 있는 엘리먼트는 꼭 key가 필요함

-----------------

Controlled Components 값이 리액트의 통제를 받는 input form elements - 모든 데이터를 state에서 관리

-----------------

Lifing State Up
부모상태로 올려 값을 올려 하위 컴포넌트로 뿌려짐

---------------------------------

Composition vs Inheritance
여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 
children prop을 사용한다

하위컴포넌트를 포함하여 합성 - containment

범용적인 개념을 구별이 되게 구체화 하는 것- specialization

sidebar나 dialog같은 box형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다.

----------------------------------

Inheritance -- 다른 컴포넌트로부터 상속을 받아서 새로운 컴포넌트를 만드는 것 -- 좋은 예시 없음

복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 만들고, 만든 컴포넌트들을 조합해서 새로운 컴포넌트를 만들자

------------------------------------

Context - 컴포넌트 트리(props)를 통해 데이터 전달 

여러 개의 컴포넌트들이 접근해야하는 데이터에 사용 (로그인 여부, 정보, 테마, 언어 등)

고려할 점 - 재사용성이 떨어짐 

Context API 
컨텍스트 생성 상위레벨에 매칭되는 provider가 없다면 기본값이 사용됨
consumer를 사용해 구독

-------------------------------------
useContext()
-------------------------------------

styled-componets 사용

 

-------------------------------------

내일 할 일

오전10시 시험
벨로퍼트 문서 보기 -- 진행중
패스트캠퍼스 강의 듣기 
옵셔널 체이닝 개념 정리
퇴직금, 강의환불