🚀 학습 목표

1. 어떠한 흐름으로 오늘날 React가 많이 사용되고 있는지 설명할 수 있다.
   • 자바스크립트 문법을 사용하고 있어 익숙하게 사용할 수 있다
   • 많은 사용자 수를 기반으로 커뮤니티가 활성화 되어 있다.
   • 컴포넌트를 비교적 간단하게 정의 할 수 있고, 컴포넌트의 사용으로 유지 보수가 쉽다
   • 웹뿐만아닌 다른 플랫폼에서도 활용 가능하다
     
     
     
     
2. React가 무엇인지 정의할 수 있다.
   • 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리
     
     
     
     
3. CRA를 설치하고 폴더와 파일이 어떻게 구성되어 있는지 설명할 수 있다.
   • node_module - npm으로부터 다운받은 모든 패키지들이 저장 되어있는 폴더
   • package_jason -프로젝트에대한 정보들이 기입된 파일
     • script -프로젝트들이 실행 할 수 있는 명령어들이 있는 곳
     • dependency - 프로젝트에서 필수로하는 패키지들의 정보가 있는 곳
     • git ignore - git add를 해도 github에서 관리하지 않는 파일들을 저장하는 곳
     • index.js - App.js와 리액트 컴포넌트를 연결하는 중간다리
     • App.js - 실제 화면에 보여지고 있느 컴포넌트
       
       
       
       
4. Component의 개념과 종류에 대해 설명할 수 있다.

• 컴포넌트란?
  • 재활용 가능한 ui 구성단위
  • 코드 재활용성 증가, 코드 유지 보수 용이
  • 해당페이지 구성요소 파악 용이
  • 컴포넌트끼리 부모자식 요소를 포함할 수 있다
    • 실제 사용은? : 반복적인 html 축약할 때, 큰페이지들, 자주 변경되는 것들 →state를 가져다쓸 때 문제가 생긴다
      
      
      
      
• class 컴포넌트
  • 초기에 많이 사용 되던 컴포넌트
  • 함수형에 비해 문법고 사용법이 복잡함
  • 예전에 class형으로 작성된 것들이 많기 때문에 읽고 해석할 수 있어야 한다.
    
    
    
    
• function 컴포넌트
  • 클래스 형에 비해 간단하고 단순함
  • state를 관리 못한다는 단점으로 초창기에는 사용되지 않았다
  • hooks라는 기능이 추가되면서 state를 관리 할 수 있게 되면서 최근에는 많이 사용함
  • 실제 현업에 가장 많이 사용되고 있는 컴포넌트
    
    
    
    

1. JSX 를 정의하고 기본 특성에 대해 설명할 수 있다.
   - 리엑트에서 사용하는 js 확장 문법
   - 바벨이라는 확장 프로그램을 통해 jsx표현식을 기본문법으로 변환 해준다.
   -
   - 자바스크립트 표현 : { ... javascript... }
   - class vs. className
   - Inline Styling : <div style={{color : "red"}}>Hello React</div>
   - Self Closing tag : <div></div> vs. <div />
   - 모든 요소를 감싸는 최상위 요소 (cf. React Fragments : <> ... </>)

       : JSX의 큰 특징 중 하나는 내부 요소들을 감싸는 최상위 요소가 있어야 한다고 배웠습니다.</br> Fragments는 DOM에 별도의 노드를 추가하지 않고 하나의 컴포넌트 안에 여러 요소(자식)들을 간단하게 그룹화 할 수 있는 기능입니다.</br> 요소들을 감싸는 **`div`** 태그의 불필요한 생성을 막을 수 있어 유용하게 사용됩니다.
     

   <>
   <div className="loginBtn" onClick={() => console.log("click")}>Login</div>
   <br />
   <div style={{backgroundColor: "grey", height: "10px"}} />
   </>