React. ch1. 07. Review

○ CDN 서비스 : 리액트를 샌드박스에서 static-HTML 환경에서 사용하기 위해서 CDN서비스를 활용해야 하는데,

                  CDN 서비스 중에 한 종류인 unpkg

○ React-dom 으로 element 생성했고, appendChild와 같은 효과를 내는 ReactDOM.render()로 rootElement에 요소를 추가함

 

○  JSX : React.crerateElement 표현식의 간편한 표기법( HTML도 JS도 아닌 리액트만의 표현법 )

 

○ Babel : 브라우저에서 JSX를 JS처럼 이해할 수 있도록 하는 js compiler를 이용 ( CDN으로 불러옴 )

             ※ 실제 웹서비스를 제공하는 단계에서는 Babel을 웹상에서 돌아가게 하지 말고 빌드한 파일을 제공해야 한다.

○ Fragment :  JSX 혹은 React로 element를 만들 때 rootElement에 하나의 element 밖에 추가하지 못했다.

다중(여러) element를 root에 추가하기 위해서 부모 역할의(컨테이너 기능) element를 만들고 그 안에 다중 element를 넣은 다음 그 부모를 root에 추가했다.  ->  React.Fragment / <></> 로 해결

 

○ Function : 함수를 이용해서 element를 반복해서 찍어낼 수 있다. 함수가 JSX를  반환하는데 그걸 CustomElement라 부른다.(첫 글자는 대문자 규칙)

 

○ Children 제한X : children 안에 또 다른 react element, custom element를 무한히 추가할 수 있다.

 

○ Interpolation : JS와 JSX 섞어쓰기 

 

○ MDN 사이트에서 [ let first = fruits.shift() ]를 확인하고 console 창에 바로 테스트 해보자.

    (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array)

   const yes = 2; [enter] -> undefined

   yes + 1 ; [enter] -> 3

   String(yes); [enter] -> "2"

   String(yes).toUpperCase(); [enter] -> "1"   ??

   const yes = "no";

   String(yes).toUpperCase(); [enter] -> 'NO'