⚛️ React

🔸 className

• class를 넣을 때는 className 사용!!
  => 중복되는 예약어 있어서
  

🔸 {}

• 변수 넣을 때는(데이터 바인딩 시에는) {중괄호} 안에!!

🔸 style

• style 넣을 때는 style={}
• {}안에 오브젝트 자료형으로 넣어주기
• css에서 자주 쓰이는 '-'기호는 뺄셈 연산자로 인식되니 카멜표기법으로 대체
• ex) style = {{color : 'blue', paddingLeft : 5px}}
  

🔸 return

• 함수 리턴문 내부는 하나의 태그로 시작해 하나의 태그로 끝내야함
• 두 개 이상을 병렬로 놓으면 오류가 뜸!!
• 해결법으로는 전체를 하나의 태그로 묶으면 됨
  => ex) < div >< /div > 혹은 < Fragment >< /Fragment > 등
  => Fragment는 빈 태그로 대체 가능 => < >< / >

  // 오류 예시
  function TestComponent(){
      return(
          < div>hello< /div>
          < div>React< /div>
      )
  }
  
  // 오류 대체 예시
  function TestComponent(){
      return(
          <>
              < div>hello< /div>
              < div>React< /div>
          </>
      )
  }

🔸 stopPropagation

• 클릭이벤트를 줄 때 내부 요소를 클릭하면 그 상위요소도 자동으로 클릭이 된 효과(이벤트 버블링)가 나타날 수 있음
• 이때는 onClick 함수 내부에 파라미터 e와 실행문 내부에 stopPropagation()을 추가해 해결

  // span 클릭하면 h4도 클릭한 효과
  < h4 onClick = {() => console.log('h4')}>
     test
     < span onClick = {()=>{console.log('span')}}> 😍 < /span>
  < /h4>

  // 해결법
  < h4 onClick = {() => console.log('h4')}>
     test
     < span onClick = {(e)=>{
         e.stopPropagatioin();
         console.log('span')
     }}> 😍 < /span>
  < /h4>

🔸 Import / Export

• JavaScript의 문법을 그대로 사용

• export default

  // export.js
  var name = 'kim';
  export default name;
  // import.js
  import 임의의이름 from './export.js'

• export 여러 변수

  // export.js
  var name = 'kim';
  var age = 27;
  export {name, age};
  // import.js
  import {name, age} from './export.js'
  // 변수 이름 그대로 가져오기!!
  // 바꾸고 싶다면? => as 사용
  import {name as 이름, age as 나이} from './export.js'

• export default + export 여러변수

  // export.js
  var name = 'kim';
  var age = 27;
  var gender = 'male';
  export {name, age};
  export default gender;
  // import.js
  import gender, {name, age} from './export.js'
  // default는 이름 자유, 나머지는 그대로 가져오기
  // default 값을 가장 먼저 써줘야 오류가 안난다!!

• 이처럼 import export를 통해 파일들을 번들링(Bundling) => 파일들을 묶듯이 연결

• 대표적인 번들러로는 웹팩, Parcel, browserify 등이 있음

• react 프로젝트에서는 주로 웹팩 사용
  => create-react-app에서 기본적으로 설치해줌!!!

• 일반적으로 react 프로젝트에서는 index.js로 파일들을 불러와 번들링

🔸 Babel

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

• 주로 호환성 등을 이유로 ES6 이후 코드를 이전 버전으로 변환시키는 툴

• 그 외에 대표적인 기능 중 하나가 JSX 코드를 브라우저가 이해하기 쉽도록 ES5로 변환시키는 역할

• create-react-app에서 기본적으로 설치

🔸 React.StrictMode

• create-react-app 사용시 index.js에서 해당 컴포넌트를 볼 수 있는데,
• 이는 리액트 프로젝트에서 앞으로 사라질 레거시 기능을 사용할 때 경고를 줌
• 앞으로 미래의 버전에 도입될 기능들이 정상적으로 호환될 수 있도록 유도
• 개발환경에서만 활성화되는 디버깅용 컴포넌트

👫 React + TypeScript

🔹 프로젝트 생성

• 터미널에서 typescript 사용하는 react app 생성
  => npx create-react-app 프로젝트이름 --template typescript
  

🔹 .tsx

• React에서 쓰는 jsx파일이 tsx파일로 생성됨

🔹 type 지정

• TypeScript와 동일하게 일반변수, 함수 만들 때 타입지정 할 수 있음

  let test : string = 'Yu'
  function(num : number):void{}

🔹 엘리먼트 타입

- html태그를 변수에 담아보면 자동으로 JSX.Element 타입이 담겨있음을 확인할 수 있음

//직접 지정도 이렇게
let testBox : JSX.Element = < div >< /div >

### 🔹 props 타입지정

• 타입 오류가 잦은 부분!!
• props는 오브젝트로 담겨 전달되기 때문에 오브젝트 타입 문법 사용

  function Profile(props : {name : string, age : number}:JSX.Element{
     return(< div >{props.name}< /div >)
  }

🔹 useState 타입지정

- 보통 초기값을 넣으면 타입이 자동으로 들어가긴 함
- 그래도 제한하고 싶은 경우가 있다면 generic 사용

let [user, setUser] = useState<string | number>('kim')