JSX 유의사항

☑️ React 컴포넌트는 하나의 값만 출력할 수 있다.

자바스크립트는 두 개의 값을 반환하지 않기 때문이다. 따라서 JSX는 반드시 단일 루트 요소만 반환되어야 한다. 모든 JSX요소는 하나의 요소안에 내포 요소로 포함되어있다.

 

아래는 잘못된 예시이다.

const App = ()=> {
  return (
    <h1>모던 리액트 프로그래밍</h1>
    <p>개념 정리하기 좋은 책이다</p>
    ) // 단일 요소로 이루어져 있어야 한다.

const add = (a, b) => {
  return ( 
    a+b
    a-b
  ); // 자바스크립트는 2개의 반환값을 가질 수 없다.
}

 

JSX는 실제로는 React.createElement 호출로 변환되는데  이때 호출이 단일 객체를 반환해야 한다.

 

동적인 컨텐츠 출력을 위해 자바스크립트 표현식을 사용할 경우 중괄호를 사용한다.

const App = (props) => {
 return (
  <>
   <h1>모던 리액트 프로그래밍</h1>
   <p>{props.description}</p>
  </>
 );
}

☑️ JSX 중괄호 안에 표현식

• 표현식은 함수 호출일 수도 있고 연산식일 수도 있다.
• 중괄호 사이에 if문과 같은 조건문이나 for와 while문과 같은 반복문은 둘 수 없다.
• 배열의 ? 또는 ||, && 연산자나 map() 메서드를 사용하는 것이 일반적이다. ( 삼항연산자, 논리연산자 사용 )

const App = () => {
  const isLoggedIn =true;
  return (
    <>
    {isLoggedIn && <p>반갑습니다!</p>}
    {isLoggedIn || <p>로그인 해주세요!</p>}
    </>
  );
}

const App = () => {
  const arr =[1,2,3,4,5];
  return (
    <>
     <ul>
      {arr.map(i => <li key={i}>{i}</li>)}
     </ul>
    </>
  );
}

 

map 메서드를 사용할 때는 각 요소에 key 속성을 작성해줘야한다.  key는 React가 각 요소를 고유하게 식별하는 데 사용되며, 최적화에 중요한 역할을 한다. 받아오는 객체의 id값을 넣는게 일반적이다.

☑️ JSX는 속성을 카멜케이스🐪로 작성한다.

자바스크립트에 예약어로된 class, for등은 className, htmlFor를 사용한다. 그 외에도 onclick 대신 onClick을 사용한다. 인라인 속성CSS를 작성시에도 카멜케이스🐪를 사용한다. ( background-color일 경우 backgroundColor로 작성 )

☑️ props와 컨텐츠를 넘길수도, 전달 받을 수도 있다.

props를 넘길 경우에는 props로 인자에 전달해주거나 구조분해할당을 통해 props로 넘어오는 값을 그대로 받을 수도 있다. 상위 컴포넌트에서 전달 받지 않은 props일 경우 undefined가 출력된다.

컨텐츠를 넘길 경우에는 props.children구문을 사용하여 컨텐츠를 전달받아 렌더링할 수 있다.

// props.children구문 사용하기
const App = (note) => {
  return (
    <>
      <h1>리액트 개념 정리하기</h1>
      <h2>{note.title}</h2>
      <p>작성자 : {note.name}</p>
      <p>{note.description}</p>
      {note.children}
    </>
   );
}

// props 기본값 설정
App.defaultProps = {
  name: "채영"
};

export default App;
// children 전달하기

export default function Home () {
  let note = {
    title: "JSX 이해하기",
    description: "티스토리를 확인해주소",
  };
  return (
    <>
     <App note={note}>
      <p> 기본을 튼튼하게 </p>
     </App>
    </>)
}

주로 개발할때는 TypeScript로도 타입을 지정하여 검증할 수 있지만 React에서 나오는 속성 검증 방법인 PropTypes 라이브러리를 사용할 수도 있다.

☑️ PropTypes

TypeScript를 사용하지 않는 경우 유용한 기능이다. TypeScript를 사용하면 PropTypes 대신 TypeScript의 타입 시스템을 사용하는 것이 더 일반적이다.

 

설치하기

npm install --save prop-types

prop-types: github.com/facebook/prop-types

 

사용 방법

import PropTypes from "prop-types";

const App = ({title, author, price}) => {
  return (
    <>
     <h1>{title}</h1>
     <p>{author}</p>
     <p>{price}</p>
    </>
         );
 };

App.propTypes = {
  title: PropTypes.string,
  author: PropTypes.string.isRequired, // isRequired는 필수 속성이라는 것을 말한다.
  price: PropTypes.number
};

export default App;

☑️ React에서의 JSX이해하기

JSX는 JavaScript XML이다. 페이스북에서 개발한 JSX는 HTML구문과 JS구문을 함께 사용해 개발할 때 효율성을 더해주는 자바스크립트 구문 확장 언어(syntax extension for JavaScript)이다. 별도의 변수를 선언해 인라인 css를 구현할 수도 있고, 태그안의 이벤트핸들러 속성을 변수로 선언하여 활용할 수도 있다. 이벤트 핸들러에 전달된 함수는 this 바인딩 문제를 해결하기 위해 bind 또는 화살표 함수를 사용한다.

 

추가적인 JSX문법 관련 React연습이 필요하다면 공식 홈페이지에서 제공하는 예문의 에러를 해결하며 개념을 익힐 수 있다.

• JSX로 마크업 작성하기
• 출처 || 모던 리액트 프로그래밍 -전병선

Writing Markup with JSX – React