[React 18.3.1] 리액트 컴포넌트, JSX, TSX, 변수 화면 노출, 조건부 렌더링, 배 렌더링 (반복문) [Key 사용 이유], 이벤트 핸들링, HTML을 JSX로 변환

📝컴포넌트, JSX, TSX

/** 예제 코드 **/
export default function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </>
  );
}

function Main () {
  return(
    <AboutPage/>
  );
}


/** 외부 컴포넌트 가져오기 **/
import Gallery from './Gallery.js';

export default function App() {
  return (
    <Gallery />
  );
}

React에서는 HTML을 여러 조각으로 나눠서 재활용 및 유지보수할 수 있게 만들 수 있습니다 이걸 컴포넌트라고 합니다

React에서 HTML을 리턴해주는 파일의 역할 및 확장자를 JSX, TSX(타입스크립트 적용시)라고 합니다

• JSX는 HTML보다 엄격해서 같은 태그로 닫아야합니다 → 하나의 부모 태그
  • 보통 <div> 태그로 닫지만 <div> 태그로 안 닫는 경우는 <> </> 이러한 태그로라도 닫아야합니다 
• 대문자로 시작해야합니다
• 다른 파일에서 사용하기 위해서는 export default로 해당 함수를 내보내야합니다

 

예제 코드

https://codesandbox.io/p/sandbox/react-dev-nh2zj3?file=%2Fsrc%2FApp.js&utm_medium=sandpack

https://codesandbox.io/p/sandbox/react-dev-nh2zj3?file=%2Fsrc%2FApp.js&utm_medium=sandpack

 

📝변수 화면 노출

/** 예제 코드 **/
return (
  <h1>
    {user.name}
  </h1>
);

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

JSX에서 HTML 코드 안에 자바스크립트 코드를 안에 넣을 수 있는데 {}안에 넣으면 됩니다

변수를 넣었으니 변수값이 출력되는 거고 데이터 format이라든가 로직이 들어갈수도 있습니다

 

📝조건부 렌더링

/** ?을 이용한 삼항연산자 조건부 렌더링 **/
<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

/** null & undefined가 아닌 값이 들어있는 경우 조건부 렌더링 **/
<div>
  {isLoggedIn && <AdminPanel />}
</div>

조건부 렌더링도 가능합니다 위에서 설명한 것처럼 {} 안에 사용하면 됩니다

조건부 렌더링의 경우 더 짧게 사용하기 위해 Javascript 문법을 사용해 표현하는 경우가 많습니다

 

&&와 그 외에 논리연산자에 더 자세히 보려면 제가 쓴 글 참고 바랍니다

https://mondaymonday2.tistory.com/848

[JavaScript] 자바스크립트 falsy 값, 논리연산자 축약, Null 및 undefined 변수 처리 ( ||=, &&=, ?? )

 

예제 코드

https://codesandbox.io/s/zjtyvn?file=%2Fsrc%2FApp.js&utm_medium=sandpack

react.dev - CodeSandbox

 

📝배열 렌더링

const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

배열로 데이터가 내려오면서 배열안에 데이터를 같은 형태의 HTML로 노출할 때 많이 사용합니다

map함수를 이용해 배열값을 렌더링 시킬 수 있습니다

 

const listItems = chemists.map(person =>
  <li>...</li> // 암시적 반환!
);

const listItems = chemists.map(person => { // 중괄호
  return <li>...</li>;
});

화살표 함수는 => 바로 뒤에 식을 반환하기 때문에 return이 필요하지 않지만 => 뒤에 {} 중괄호가 오는 경우는 return을 명시해야합니다

 

예제코드

https://codesandbox.io/s/2dmxxm?file=%2Fsrc%2FApp.js&utm_medium=sandpack

react.dev - CodeSandbox

 

📝배열 렌더링 Key 사용 이유

import { people } from './data.js';
import { getImageUrl } from './utils.js';

export default function List() {
  const listItems = people.map(person =>
    <li key={person.id}>
      <img
        src={getImageUrl(person)}
        alt={person.name}
      />
      <p>
        <b>{person.name}:</b>
        {' ' + person.profession + ' '}
        known for {person.accomplishment}
      </p>
    </li>
  );
  return (
    <article>
      <h1>Scientists</h1>
      <ul>{listItems}</ul>
    </article>
  );
}

Key는 각 컴포넌트가 어떤 배열 항목에 해당하는지 React에 알려주어 나중에 일치시킬 수 있도록 합니다

이는 배열 항목이 정렬 등으로 인해 이동하거나 삽입되거나 삭제될 수 있는 경우 중요해집니다

key를 잘 선택하면 React가 정확히 무슨 일이 일어났는지 추론하고 DOM 트리에 올바르게 업데이트 하는데 도움이 됩니다

 

데스크탑의 파일에 이름이 없다고 상상해 보세요. 대신 첫 번째 파일, 두 번째 파일 등 순서대로 파일을 참조할 것입니다. 익숙해질 수도 있지만, 파일을 삭제한다면 혼란스러워질 수도 있습니다. 두 번째 파일이 첫 번째 파일이 되고 세 번째 파일이 두 번째 파일이 되는 식으로 말이죠.

폴더의 파일 이름과 배열의 JSX key는 비슷한 용도로 사용됩니다.

이를 통해 형제 항목 간에 항목을 고유하게 식별할 수 있습니다.

잘 선택된 key는 배열 내 위치보다 더 많은 정보를 제공합니다. 재정렬로 인해 위치가 변경되더라도 key는 React가 생명주기 내내 해당 항목을 식별할 수 있게 해줍니다

 

 

Key 특징

• key는 형제 간에 고유해야 합니다 하지만 같은 key를 다른 배열의 JSX 노드에 동일한 key를 사용해도 괜찮습니다.
• key는 변경되어서는 안 되며 그렇게 되면 key는 목적에 어긋납니다! 렌더링 중에는 key를 생성하지 마세요.

 

Key 주의점

• 인덱스를 key로 사용하면 종종 미묘하고 혼란스러운 버그가 발생하니 사용하지마세요
• 마찬가지로 key={Math.random()}처럼 즉석에서 key를 생성하지 마세요. 이렇게 하면 렌더링 간에 key가 일치하지 않아 모든 컴포넌트와 DOM이 매번 다시 생성될 수 있습니다. 속도가 느려질 뿐만 아니라 리스트 항목 내부의 모든 사용자의 입력도 손실됩니다. 대신 데이터 기반의 안정적인 ID를 사용하세요

 

📝이벤트 핸들링

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

React의 경우 함수의 값을 호출하는게 아닌 함수의 주소값을 전달하는 것입니다 → React에서 정한 문법이기 때문에 따라야합니다

 

📝HTML To JSX

아래 사이트에서 HTML을 JSX형식으로 변환시킬 수 있습니다

 

https://transform.tools/html-to-jsx

HTML to JSX