[React] 2. JSX에 대한 특성

잘못 된 내용에 대한 지적은 언제든 환영입니다.

JSX 태그 기본 특성

• 태그는 항상 열림-닫힘이 확실해야 한다.

   // hr 태그가 닫혀있지 않으므로 에러
   return (
     <div>
       <p>Hello World!</p>
       <hr>
     </div>
   );

   // 노 에러
   return (
     <div>
       <p>Hello World!</p>
       <hr></hr>
     </div>
   );

👉 굳이 열림-닫힘을 모두 명시해주고 싶지 않을 경우, Self-Closing 문법을 활용할 수 있다.

   return (
     <div>
       <p>Hello World!</p>
       <hr />
     </div>
   );

• 두 개 이상의 태그는 항상 하나의 태그로 감싸져야 한다.

   // 두 개의 태그가 하나의 태그 안에 감싸져 있지 않으므로 에러
   return (
     <Component />
     <Component>Hello World!</Component>
   );

   // 노 에러
   return (
     <div>
       <Component />
       <Component>Hello World!</Component>
     </div>
   );

• div 태그 대신 Fragment 태그(<></>)를 사용할 수 있다.

   return (
     <>
       <Component />
       <Component>Hello World!</Component>
     </>
   );

JSX 내부에서 JS 코드 사용하기

JSX 내부에서 중괄호로 감싼 JS 코드를 사용할 수 있다.

const name = "Uncyclocity";
return <div>{name}</div>;

return (
  /* 배열 렌더링 :
  users 배열의 각 요소를 map 배열함수를 통해 렌더링하는 코드이다. */
  <div>
    {users.map(user => (
      <User user={user} key={index} />
    ))
  </div>
);

JSX에서의 스타일링

1. 인라인 스타일

   return <div style={{fontSize: 20}}>Hello World!</div>

   const style = {
     fontSize: 25,
     color: "#47C83E",
   
     backgroundColor: "white",
     boxShadow: "0px 0px 30px #86E57F",
     borderRadius: "30px",
   
     width: "230px",
     padding: "4rem",
   };
   return <div style={style}>Hello World!</div>;

• 객체 리터럴 형태로 작성한다.

• 객체의 key 값에는 스타일 속성명을, value 값에는 그의 값을 문자열 형태로 입력한다.
  👉 스타일 속성을 숫자만 입력 할 경우, 픽셀 단위로 자동 설정된다.

    return <div style={{fontSize: 20}}>Hello World!</div> // px 단위로 자동 설정됨

    return <div style={{fontSize: "2rem"}}>Hello World!</div> // 원하는 단위를 설정해 줌

• background-color 처럼 구분자(-)가 들어간 속성의 경우, backgroundColor와 같이 lowerCamelCase 형태로 작성해야 한다.

2. 외부 스타일시트

   단지 import 하여 사용하면 된다!

   import "./style.css";

   import "./style.scss"; // SaSS 스타일시트

3. 기타

   • styled-components 등을 통해 JS파일 내부에서 스타일링 코드를 작성할 수 있다.
     👉 이러한 기술을 CSS in JS라고 한다.

   • JSX에서 class를 설정할 때는 속성명을 class가 아닌 className로 써주어야 한다.

       <div className="main_page" />

• id를 사용할 수도 있으나, JSX에서는 권장되지 않는다.
  👉 JSX DOM에 id를 달게 될 경우 렌더링 시 id가 그대로 전달되는데, 이 경우 해당 컴포넌트를 여러 번 사용하게 될 시 id 중복이 발생한다.
  DOM을 직접적으로 조작해야 할 경우 useRef()를 사용하며, 이에 대한 내용은 추후 업로드 예정이다.

JSX에서의 이벤트 핸들링

const greeting = () => {
  console.log("Hello World");
};

return <button onClick={greeting}></button>;

• JSX에서의 이벤트 속성명은 on 다음의 문자를 대문자로 표기한다.

  onclick ➡️ onClick

• 이벤트속성={실행할 코드} 형태로 작성한다.

  Q. 왜 onClick={onIncrease()}로 작성하지 않는 것인가요🤔

  A. 위와 같이 함수 실행 코드를 넣을 경우, 이벤트 발생 여부와 상관 없이 렌더링 시점에서 함수 호출이 이루어지기 때문이다.

  파라미터를 넘겨주어야 한다면? onClick={() => onIncrease(num)} 형태로 작성한다.

JSX에서의 주석

return (
  <
    // 열림 태그에 한줄 주석 작성
  >
    {/* JSX 코드 내에서의 일반적인 주석*/}
  </>
);

• 열림 태그 및 self-closing 태그 내부에서 한줄 주석을 작성할 수 있으며, 닫힘 태그에는 작성할 수 없다.

• 그 외의 구역에는 JS 주석을 사용하며, 중괄호 내부에 주석을 작성한다.
  

References

"4. JSX의 기본 규칙 알아보기" .velopert

"7. useState 를 통해 컴포넌트에서 바뀌는 값 관리하기" .velopert

"React - ref : DOM에 이름 달기" .backback