리액트 공식 문서 연습하기

JSX에 표현식 포함하기

//함수표현식 만들기
function 이름바꾸기함수(파라미터) {
  return 파라미터.firstName + ' ' + 파라미터.lastName;
}

//언제든 바뀔 수 있는 데이터
const 사용자 = {
  firstName: '해리',
  lastName: '포터'
};

//함수표현식에 데이터를 넣어서 JSX 구현하기
const 엘리먼트 = (
  <h1>
    안녕, {이름바꾸기함수(사용자)}!
  </h1>
);

//렌더링하기
const 루트 = ReactDOM.createRoot(document.getElementById('root'));
루트.render(엘리먼트);

원문

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

DOM에 엘리먼트 렌더링하기

html파일

<div id="root">
  <!-- This div's content will be managed by React. -->
</div>

js파일

const 루트 = ReactDOM.createRoot(document.getElementById('root'));
const 엘리먼트 = <h1>안녕</h1>;
루트.render(엘리먼트);

렌더링 된 엘리먼트 업데이트하기

const 루트 = ReactDOM.createRoot(document.getElementById('root'));
  
function 시계함수() {
  const 엘리먼트 = (
    <div>
      <h1>시계</h1>
      <h2>지금은 {new Date().toLocaleTimeString()}입니다.</h2>
    </div>
  );
return 루트.render(엘리먼트);
}

setInterval(시계함수, 1000);

시계
지금은 오전 12:07:11입니다.

위 함수는 setInterval() 콜백을 이용해 초마다 루트.render()를 호출

원문

const root = ReactDOM.createRoot(document.getElementById('root'));
  
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);
}

setInterval(tick, 1000);

---

컴포넌트 합성

//컴포넌트는 엘리먼트를 리턴한다!!
function 환영컴포넌트(프롭스) {
  return <h1>환영, {프롭스.이름속성}</h1>;
}

function 앱() {
  return (
    <div>
      <환영컴포넌트 이름속성="석진" />
      <환영컴포넌트 이름속성="윤기" />
      <환영컴포넌트 이름속성="정국" />
    </div>
  );
}

const 루트 = ReactDOM.createRoot(document.getElementById('root'));
루트.render(<앱 />);

원문

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);