TIL ( 2021.06.09)

Sehyeon Park·2021년 6월 9일

생활코딩! html css js 관련 책을 구매해서 읽고있다.
매우 기초적인 부분부터 내가 잠깐 잊고있던 부분까지 다시 시작한다는 마음으로!

참고 : https://ko.reactjs.org/tutorial/tutorial.html

오늘은 REACT를 다시 공부해보자

상태값 관리와 기능적인 부분에 초점을 두기위해 만들어진 리액트!

Hello World

가장 단순한 React 예시는 다음과 같이 생겼습니다.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

JSX에 표현식 포함하기

아래 예시에서는 name이라는 변수를 선언한 후 중괄호로 감싸 JSX 안에 사용하였습니다.
자바스크립트 문법으로 복잡도는 낮추고 가독성은 올린다.
1. 반드시 하나의 엘리먼트로 감싸있어야한다.
2. 자바스크립트 코드를 작성할시 {}안에 작성한다.
3. JSX내부에선 if문이 사용이 안된다.
4. 엘리먼트 클래스이름사용시 className 사용


const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

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


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')
);

JSX도 표현식입니다

컴파일이 끝나면, JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식됩니다.

즉, JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있습니다.

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

JSX 속성 정의

속성에 따옴표를 이용해 문자열 리터럴을 정의할 수 있습니다.

const element = <div tabIndex="0"></div>;

중괄호를 사용하여 어트리뷰트에 JavaScript 표현식을 삽입할 수도 있습니다.

const element = <img src={user.avatarUrl}></img>;

어트리뷰트에 JavaScript 표현식을 삽입할 때 중괄호 주변에 따옴표를 입력하지 마세요. 따옴표(문자열 값에 사용) 또는 중괄호(표현식에 사용) 중 하나만 사용하고, 동일한 어트리뷰트에 두 가지를 동시에 사용하면 안 됩니다.

JSX로 자식 정의

태그가 비어있다면 XML처럼 /> 를 이용해 바로 닫아주어야 합니다.

const element = <img src={user.avatarUrl} />;

JSX 태그는 자식을 포함할 수 있습니다.


const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

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

React 엘리먼트는 불변객체입니다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없습니다. 엘리먼트는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여줍니다.

지금까지 소개한 내용을 바탕으로 하면 UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 ReactDOM.render()로 전달하는 것입니다.

예시로 똑딱거리는 시계를 살펴보겠습니다.


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