react

[React] 리액트 시작하기 ver.1 💿

리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 기반의 라이브러리입니다.

리액트는 순수 자바스크립트와 JSX를 사용하기 때문에 자바스크립트는 알아야 합니다.

기본적인 문법들을 모르신다면 자바스크립트 게시글을 참고해주세요! 👇

javascript #1. 변수, 자료형

자바스크립트가 대세라고 했던가... 대학 재학 4년째에 처음 자바스크립트를 접해봅니다ㅎㅎ.. 제로초로 공부하라고 추천을 받아서 제로초로 자바스크립트 기본기를 다졌습니다! 복습이나 할

dvlpseo.tistory.com

주요 개념 정리 Part.1

feat. 공식문서

JSX - JavaScript + XML

1. JSX

JSX는 javascript 코드에 xml을 추가하여 확장한 문법이다.

리액트의 가장 작은 단위의자 화면에 표시할 내용을 기술하는 속성(element)을 생성하여

JS의 모든 기능이 포함되어 있다.

필수로 사용해야하는 것은 아니지만 JS 코드 안에서 UI 작업을 할 때 시각적으로 도움이 되고 에러 및 경고 메세지를

표시해주어 사용자에게 편의성을 제공한다.

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

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

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

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

👉 중괄호 안에는 모든 유효한 Javascript를 넣을 수 있다.

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

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

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

2. JSX 속성 정의

const element = <a href="https://www.reactjs.org"> link </a>;

👉 속성에 따옴표를 이용하여 문자열 리터럴 정의할 수 있다.

👉 속성에 중괄호를 사용하여 JS 표현식 삽입을 할 수 있다.

(속성에 JS 표현식을 삽입할 때 둘 중 하나만 사용)

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

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

👉 태그가 비어있다면 XML처럼 /> 을 이용하여 닫아준다.

📌 camelCase 프로퍼티 명명규칙에 따라서 정의해줌

3. JSX는 객체를 표현

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

👉 Babel은 JSX를 React.createElement() 호출로 컴파일 한다.

위 코드 element를 react.createElement()를 사용하여 객체를 생성하면,

// 주의: 다음 구조는 단순화되었습니다
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

👉 이러한 객체를 "react 엘리먼트" 라고 한다.

React는 이 객체를 읽어, DOM 을 구성하고 최신상태로 유지시킨다.

Element

엘리먼트는 화면에 표시할 내용을 기술하는 가장 작은 단위

렌더링

= html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것

<div id="root"></div>  
// 루트 DOM 노드 
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

👉 React 엘리먼트를 렌더링 하기 위해서는

우선 DOM 엘리먼트를 ReactDOM.createRoot()에 전달한 다음,

React 엘리먼트를 root.render()에 전달한다.

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

리액트 엘리먼트는 불변객체이기 때문에 자식이나 속성을 변경할 수 없고,

영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여준다.

UI를 업데이트 하는 유일한 방법은 새로운 엘리먼트를 생성해 ReactDOM.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);

Components와 Props

리액트는 컴포넌트 기반 라이브러리이다.

컴포넌트는 UI의 여러 부분을 분할하여 코드의 재사용성과 유지보수성을 향상시킨다.

(웹페이지를 하나의 완성품이라고 했을 때, 컴포넌트는 하나의 부품)

📌 컴포넌트는 독립적으로 재사용 가능한 코드를 관리 할 수 있도록 도와준다.

1. 함수 컴포넌트

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

👉 함수처럼 선언되어 있고, JSX를 리턴한다.

데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터) 객체 인자를 받은 후, React 엘리먼트를 반환한다.

2. 클래스 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

👉 렌더 메소드를 가진 React.Component를 확장시키는 자바스크립트의 클래스이다.

렌더링 될 JSX는 렌더 메소드 안에서 리턴

참고자료 : 공식 문서 , velog.io/@edie_ko , velog.io/@cjhlsb

Contents

새소식

인기 검색어