React TIL 01

2021년 7월 8일에 작성된 문서 1번 입니다.
React 배운 내용을 정리했습니다.

JSX

자바 스크립트 문법의 확장판

• 리액트를 사용해서 UI 구성시 사용
• 문자열도 아니고 그렇다고 HTML도 아님.

• JSX는 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니라서 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야한다.
  • 이때 이용하는 것이 “Babel”.
  • Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일한다.

• React에서는 DOM과 다르게 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있다.
• JSX를 사용하면 JavaScript만으로 마크업 형태의 코드를 작성하여 DOM에 배치할 수 있게 된다.

JSX의 장점

• React에서는 JSX를 이용해서 DOM 코드보다 명시적으로 코드를 작성할 수 있다.
• JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있다.
• JSX없이 리액트 개발은 가능하지만 가독성도 떨어지고 복잡해지기만하므로 JSX를 사용한다.

// JSX 없이 활용한 React
return  React.createElement("h1",  null,  `Hello, ${formatName(user)}!`);

// JSX 를 활용한 React
return <h1>Hello, {formatName(user)}!</h1>;

// 확실히 JSX쪽이 보기가 쉽고 복잡하지 않다.

JSX의 규칙과 활용

• 여러 엘리먼트를 작성하고자 하는 경우, 꼭 opening tag와 closing tag로 감싸주어야 한다. (하나의 엘리먼트에 모든 엘리먼트가 포함)
  
  
  

• CSS class 속성을 지정하려면 className으로 표기한다. (class로 작성하게 된다면 React에서는 자바스크립트 클래스로 받아들임)
  
  
  

• JavaScript 표현식 쓸 때는 중괄호를 이용한다. (중괄호를 사용하지 않으면 일반 텍스트로 인식함.)
  
  
  

• 사용자 정의 컴포넌트는 꼭 대문자로 시작하자. (소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식)
  
  
  

• 조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야한다.
  
  
  

• 여러 개의 HTML 엘리먼트를 표시할 때는 map() 함수를 사용

  • map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야한다.

  

export  default  function  App()  {
const  content  =  posts.map((posts)  =>  (
<div  key={posts.id}>
<h3>{posts.title}</h3>
<p>{posts.content}</p>
</div>
));
// 이렇게 써서 Hands-On의 에러가 사라졌다!

Written with StackEdit.