Web_React #14

210825
Web_React #14

• JSX에서 JS를 사용

import ReactDOM from 'react-dom';

const product = '맥북';

ReactDOM.render(
    <h1>나만의 {product} 주문하기</h1>,  
    document.getElementById('root')
);

JS코드를 활용하기 위해서 중활호로 감싸주면 된다.

정상작동

변수 product의 값을 변경하면 다른 값을 출력할 수 있다.

import ReactDOM from 'react-dom';

const product = 'MacBook';

ReactDOM.render(
    <h1>나만의 {product} 주문하기</h1>,  
    document.getElementById('root')
);

import ReactDOM from 'react-dom';

const product = 'MacBook';
const model = 'Air';
const item = product + model;

ReactDOM.render(
    <h1>나만의 {item} 주문하기</h1>,  
    document.getElementById('root')
);

더하기 연산도 가능하다.
이처럼 요소 내부에 JS를 사용할 수도 있지만, 중괄호를 활용하여 속성값에도 JS를 사용할 수 있다.

import ReactDOM from 'react-dom';

const product = 'MacBook';
const model = 'Air';
const item = product + model;
const imageUrl = 
'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/MacBook_with_Retina_Display.png/500px-MacBook_with_Retina_Display.png';


ReactDOM.render(
    <>
      <h1>나만의 {item} 주문하기</h1>
      <img src={imageUrl} alt="제품 사진" />
    </>,  
    document.getElementById('root')
);

주의점은 src에서 이미지 주소를 따옴표가 아닌 중활호로 묶는다는 것이다.
eventhandler의 속성또한 마찬가지이다.

import ReactDOM from 'react-dom';

const product = 'MacBook';
const model = 'Air';
const item = product + model;
const imageUrl = 
'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/MacBook_with_Retina_Display.png/500px-MacBook_with_Retina_Display.png';

function handleClick(){
  alert("곧 도착합니다!");
}

ReactDOM.render(
    <>
      <h1>나만의 {item} 주문하기</h1>
      <img src={imageUrl} alt="제품 사진" />
      <button onClick={handleClick}>확인</button>
    </>,  
    document.getElementById('root')
);

button태그에 onClick이라는 속성을 주고 중활호 내에 함수명을 넣어주어 이벤트 등록을 할 수 있다.

주의할 점은 중활호 내에서는 JS의 표현식만 사용할 수 있다. 따라서 if문이나 for문, 함수 선언과 같은 JS의 문장은 사용할 수 없다.

참고
https://www.codeit.kr/courses/react-frontend-development/topics/getting-started-with-react