패스트캠퍼스) KDT 핀테크 서비스 프론트엔드 과정 2기 TIL | 국비지원교육 | 핀테크 프론트엔드개발자

KDT_Megabyte School 핀테크 서비스 프론트엔드 과정 2기

 

## 220729 Today I Learned

• React 
• Component
• JSX
• React Project

 

React

• Meta (전 Facebook) 에서 2011년에 만든 프론트엔드 라이브러리 (프레임워크)
• 현재 2006년에 처음 등장한 유서깊은 jquery 보다도 훨씬 많이 쓰는 프레임워크가 되었다.

Component

• React 는 component 라는 것을 작성해서, 조합하는 방식으로 코딩을 진행한다.
• 컴포넌트는 하나의 html 페이지에서 요소들을 잘게 나눈 것이라고 생각하면 쉽다.

 

컴포넌트의 장점

• 팀으로 하나의 페이지를 작성할 때 요소 별로 나눠서 작업할 수 있다.
• 복잡한 페이지의 코드를 조금 더 직관적으로 볼 수 있는 등 다양한 장점이 존재한다.

JSX

• JSX 는 react 에서 쓰이는 자바스크립트 확장 문법으로, html 을 자바스크립트 기반으로 작성할 수 있도록 하는 문법이다
• 지금까지는 자바스크립트 코드는 js 파일이나 <script> 태그 안에 쓰고, html 코드는 html 파일 안에 써왔지만, 이제부터는 js 파일 안에 자바스크립트와 html 코드를 모두 쓴다.

JSX 규칙

1. 반드시 전체를 감싸는 부모 태그가 하나 있어야 한다. (빈 태그로 감싸도 됨)

  return (
    <>Timer</>
  )

아래처럼 태그 전체를 감싸는 부모 태그가 없다면 에러가 발생합니다.

  return (
    <div>Timer</div>
    <div>Timer</div>
  )

2. jsx 내부에서, 외부 자바스크립트 부분에서 선언한 변수나 함수를 쓸 때는 {} 기호를 쓴다.

function Timer() {
	const name = "춘식"

  return (
    <div>{name} Timer</div>
  )
}

3. jsx 내부에서, html 태그 요소에 class 를 주고 싶을 때는, className 을 쓴다.

import './App.css';

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

4. 주석은 {/* 주석내용 */} 형태로 사용할 수 있다.

  return (
		{/* 주석내용 */}
    <>Timer</>
  )