React

haahi·2023년 2월 19일

React

목록 보기
1/6
post-thumbnail

1. Component

컴포넌트란 리액트로 만들어진 앱을 이루는 최소한의 단위로, 독립적인 업무나 기능을 수행하는 모듈이며, 재사용이 가능하다는 특징을 갖는다.
마치 여러개의 레고 블럭으로 하나의 건물을 만든다고 생각하면 이해가 더 쉬울 것이다.
이렇게 만들어진 컴포넌트는 반복적으로 사용되는 요소를 대체하여 간결한 코드를 작성할 수 있게 해준다.

2. 선언형 프로그래밍

리액트는 선언형 프로그래밍 방식을 사용하는데 선언형 프로그래밍이란 어떻게(HOW) 할 것인가 보다 무엇(WHAT)을 할 것인지 작성하는 것을 말한다.

이를 더 자세히 알아보고자 명령형 프로그래밍과 선언형 프로그래밍을 예를 들어 비교하여 설명해보겠다.

카레를 만들어 먹자

  • 명령형 프로그래밍: 어떻게(HOW)
    감자, 당근, 고기를 준비 > 알맞은 크기로 자르기 > 물과 재료를 넣고 충분히 끓이기 > 카레 가루 넣기 > 맛있게 먹기

  • 선언형 프로그래밍: 무엇을(WHAT)
    내가 만든 카레 맛있게 먹기

이렇게 명령형 프로그래밍은 어떤 일을 하기 이러위해서 필요한 과정을 모두 알려줘야하는데 선언형 프로그래밍은 결과만 알려주면 된다.
이것이 가능한 이유는 리액트 내부적으로 카레를 만드는 방법을 알고 있기 때문이다.


코드를 통한 예시는 아래와 같다 
// Hello, World! 화면에 출력하기
// javaScript 명령형 코드
const root = document.getElementById('root'); 
const header = document.createElement('h1'); 
const headerContent = document.createTextNode(
	'Hello, World!'
);

header.appendChild(headerContent); 
root.appendChild(header); 

// React 선언형 코드
const header = <h1>Hello, World!</h2>; // jsx
ReactDOM.render(header, document.getElementById('root'));

3. React 설치 & 실행

설치하고자 하는 폴더에 터미널 창을 열고 npx create-react-app, npm start 를 순서대로 입력하면 아래와 같은 창이 열린다.

4. React 파일 3개

  • index.html
    public 폴더에 있다. 메인 프로그램인 index.js에 대응되는 것으로, HTML 템플릿 파일이다.
    이 파일이 직접 표시되는 것은 아니고, index.js에 의해 일어 와서 렌더링된 결과가 표시된다.
    이 파일만이 React 애플리케이션에서 실행된다.

  • index.js
    src 폴더에 포함되어 있다. 메인 프로그램이라고할 수 있다. 여기에서 HTML 템플릿 및 JavaScript의 컴포넌트를 조합하여 렌더링하고 실제로 표시한다.

  • app.js
    src 폴더에 포함되어 있다. 컴포넌트를 정의하는 프로그램이다. 실제로 화면에 표시되는 내용 등은 여기에서 정의한다.

5. JSX

특징

  • JavaScript를 확장한 문법이기 때문에 공식적인 자바스크리트 문법은 아니다.
  • JavaScript의 모든 기능이 포함되어 있다.
  • JSX 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있다.

문법

  1. 중괄호를 사용하여 JavaScript의 표현식을 넣을 수 있다
	const name = 'Josh Perez';
	const element = <h1>Hello, {name}</h1>;

  1. camelCase
    JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.
    예를 들어, JSX에서 class는 className가 된다.

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

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

profile
haahi
다음 포스트

React - component와 props

0개의 댓글