2022_01_17

• GlobalState - 하나의 State를 모든 페이지에서 접근하고 사용할 수 있다. (작동원리는 state와 같다.)

• Nullish coalescing - data ?? data.fetchProfile - 앞의 조건이 거짓일때 뒤의 문장을 렌더링

   즉, Nullish 는 null 이거나 그와같은 undefined 일때만 렌더링을 해주는 것이다.
  
  * false는 null, undefined와 다르기에 착각하면 안된다.

⚙︎ Container / Presenter 패턴

  프로젝트를 만들때 폴더를 구조화하는 하는 방법으로 '패턴' 이라 한다.
React에서 주로 사용하는 패턴으로는 container / presenter 패턴과 atomic 패턴이 있다.

Container: JavaScript 부분과 Presenter: JSX(html) 부분으로 나뉜다.

편의를 위해 나눈것뿐 실행은 같이해야하기에 Contaienr(부모컴포넌트)에 Presenter(자식컴포넌트) 를 import하여 사용한다.

위의 이미지의 경우 변수와 함수가 아직 연결되지 않은상태이다.

⚙︎ Props

  부모 컴포넌트의 변수/함수를 자식 컴포넌트에게 보내는 방법으로 porps 라는 이름의 ‘객체’로 보내어지게 된다. (객체 안에 함수가 있을 뿐 접근법은 같다.)

• React: 데이터의 흐름이 단방향 구조로 자식이 부모에게 줄 수는 없다.(우회방법이 있기는 하다.)

자식 컴포넌트 함수 실행문에 부모에게 전달받은 함수를 넣고 그 인자로 전달하고자 하는 자식의 데이터를 넣어주면 된다.

• Angular: 데이터의 흐름이 양방향 구조로 양날의 검이다.

* 부모 자식 관계를 잘 파악해야 한다.

⚙︎ import / export 규칙

• 낱개로 한 export는 import { } 로 받는다 . (개별로)

• 모든 export를 받고싶다면 * 을 사용한다. 단, 이름을 지정해 주어야 한다.

  ex) import * as AAA from ‘...’
  객체이기 때문에 AAA.(customName) 으로 접근할 수 있다.

• default 로 선언한 export는 { } 없이 불러올 수 있다. default를 불러오기때문에 이름이 달라도 import된다. (가독성을 위해 같은 이름을 쓰도록 하자)

  ex) import dalaran, {a,b,c} from ‘...’

⚙︎ State

  state를 바꾸면 그 state를 이용하여 컴포넌트가 리렌더링(Rerendering)된다.

이때 setState값이 변경될 때마다 리렌더링을 하면 비효율적이기에 setState를 하면 일단 임시저장소에 값을 저장하게 된다. 그 후 모든 작업이 끝나면 그 값을 가져와 한번만 리렌더링을 하게된다.

이러한 이유때문에 input 값을 state 로 받고 그 값을 호출하게 되면 한칸씩 밀리는 현상이 발생하게 된다.

즉, 이벤트 헨들러에서의 setState는 비동기로 작동한다.

—> 한칸씩 밀림