[React] Hello World! (1)

해당 글은 https://ko.reactjs.org/docs/introducing-jsx.html를 참고하고 있습니다. 

 

React의 시작

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello World!</h1>);

 

JSX란

JavaScript를 확장한 문법

const element = <h1>Hello World!</h1>

 

JSX 표현식

const name = 'Good Coder';
const element = <h1>Hello, {name}</h1>;

실행 결과: Hello, Good Coder

 JSX의 { } 안에는 모든 JavaScript 표현식을 넣을 수 있다. 

 예) 2+2, user.firstName, formatName(user) ...

 

// user의 성과 이름 사이에 공백을 넣어주는 JS 함수
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

// user라는 객체 선언
const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

// element 변수에 JSX 문법 할당
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
); // JSX를 여러 줄로 나눌 때는 ( )로 감싸주기

 

함수 안에서 JSX 문법 사용하기

function getGreeting(user) {
  if (user) {
    return <h1>Hello, World!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

 

JSX 문법 안에서 함수 호출하기

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>; // 함수 호출 시 { } 감싸주기
  }
  return <h1>Hello, Stranger.</h1>;
}

 

JSX로 사용자 입력받기

const title = response.potentiallyMaliciousInput;
const element = <h1>{title}</h1>;