React JSX(TSX)

⭐ JSX(TSX)

• JS(TS) 파일 내에서 HTML과 유사한 마크업을 작성할 수 있도록 해주는 JS 구문 확장 문법

✔️ 사용 목적

• 선언적 뷰 설계 가능 (UI를 직관적으로 설계)
• 불필요한 DOM 설정 필요하지 않다.

✔️특징

• JS + HTML(XML) 형태로 엄격한 문법 체계
• JSX 내에서 Babel을 사용해 JS로 변환하려면 XML 문법을 준수

⭐ JSX 문법 규칙

✅ 단일 루트 노드

• 하나의 '컴포넌트'는 단일 루트 노드만 반환
  >> 최상단의 루트 태그가 존재해야 함
  >> 주로 <></> 빈 Fragment로 감싸서 표현

✅태그 닫기

• 태그는 반드시 닫혀야 하며 단일 태그 사용 시 닫히는 꺽쇠괄호에 /가 첨부!
  >> input, br, hr, img 등

✅대소문자 구분

• 태그 내의 이름이 대소문자를 구분
  >> 소문자로 시작: 'HTML' 요소로 인식
  >> 대문자로 시작: 사용자 정의 '컴포넌트'로 인식

✅HTML 코드를 JSX로 변환 시 주의점

• 대부분 lowerCamelCase 사용
    : css 속성, on- 메서드 등
• class속성의 경우 className으로 변경
    : JS의 class(객체 틀)과의 이름 충돌

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

 

✔️JSX 안에서 자바스크립트 값 사용

✅ JSX 내에서 중괄호 사용 방법 (2가지)

• JSX 태그 내에서 직접적인 데이터 사용
•  '속성=' 기호 바로 다음

export default function JSX01() {
  const welcomeMsg = "환영합니다.";

  const greeting = (name: string) => `안녕하세요 ${name}님`;

  const userInfo = {
    name: "장지민",
    age: 70,
  };

  // 요소의 이벤트로 함수 전달
  const handleClick = (value: string) => {
    console.log(`${value}`);
  };

  // CSS 객체(값: 문자열 지정)
  const divStyle = {
    backgroundColor: 'orange',
    color: 'white',
    padding: '10px'
  }
  
   class Hello {
    id: string;
    constructor(id: string) {
      this.id = id;
    }
  }

요소의 이벤트를 전달할 함수: 함수가 실행되면 매개변수를 콘솔창에 출력하는 handleClick를 만들다.

divStyle로 CSS 객체를 만든다.

class를 Hello 속성 타입을 정의한다.

 

 return (
    <>
     {/* html 요소 */}
      <div>JSX01</div>
      <p style={{ fontSize: "20px", color: "pink" }}>안녕하세요</p>
      <input type="text" />
      <img src="" alt="" />
      <br />
      <hr />
      
      {/* 컴포넌트 */}
      <Div />
      <hr />
      <div>{welcomeMsg}</div>
      <div>{greeting("장지민")}</div>
      <div>
        이름: {userInfo.name} / 나이: {userInfo.age} /{3 + 5 / 2}
      </div>
      
      <button onClick={() => handleClick("클릭")}>클릭해주세요</button>

      <div style={divStyle} id="divElement" className="">
        DIV 요소
      </div>
    </>
  );
}

• html 요소에서 직접 스타일을 바로 적용할 수도 있다.
• 컴포넌드 부분
  • div요소에 {welcomeMsg}상수를 넣으면 화면에 { welcomeMsg}의 값인 "환영합니다." 가 출력된다.
  • greeting함수에 매개 변수  
  • 이름에는 userInfo에 있는 name속성값을 가져오기 위해 userInfo.name을 넣고 나이도 동일하게 작업을 해준다.
  • onClick이벤트는 handleClick()의 매개변수값으로 "클릭"이 들어가면 button을 클릭하면
    콘솔창에 매개변수 값이 전달되어 "클릭"을 출력한다.

✔️ 결과

• Div 요소에는 style속성에는 divStyle을 속성값으로 넣어서 배경색은 오렌지 글자색은 화이트,
  padding값은 10px로 들어간다.

• button요소를 클리하면 콘솔창에  handleClick()  매개변수인 클릭이 출력된다.