[React] #01 - React 기초

김준경·2023년 3월 23일
0

React

목록 보기
1/5
post-thumbnail

React?

  React는 미국 기업 'Meta' 에서 개발한 오픈 소스 자바스크립트 라이브러리이다. 또한 사용자 인터페이스(UI)를 만드는데 도움을 준다.

JSX?

  Jsx는 JavaScript에 XML을 추가로 확장한 문법이다. JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다. 자바스크립트 파일에서 HTML을 작성하기 때문에 파일 분할이 필요 없고 상당히 편리하다.

  JSX문법에는 몇가지 특징이 있다.

  1. 반드시 부모 요소 하나가 감싸는 형태여야 한다.
     Virtual DOM에서 컴포넌트 변화를 감지할 때 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.

잘못된 코드

	<div id="container">
     	<h1>Hello React</h1>
	</div>
	<h1>Hello React2</h1>

올바른 코드

<> //빈 태그로 묶어줄 수 있다.
	<div id="container">
     	<h1>Hello React</h1>
	</div>
	<h1>Hello React2</h1>
</> 
  1. 자바스크립트 표현식
     JSX 안에서도 자바스크립트 표현식을 사용할 수 있다. 자바스크립트 표현식을 작성하려면 JSX내부에서 코드를 { }로 감싸주면 된다.
    유효한 모든 JavaScript 표현식을 넣을 수 있다.
	let name = "Kim Jun Gyoung";
  
   <h1>{name}<h1> //Kim Jun Gyoung

Component?

  리액트를 사용하기 위해서는 먼저 '컴포넌트'라는 개념부터 알아야 한다. 리액트 공식 문서에는 컴포넌트에 대해

'컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.'

  위의 문장 중 핵심은 'UI를 재사용' 할 수 있다는 것과 '컴포넌트는 JavaScript 함수와 유사합니다.' 라는 문장이다.

  이게 무슨 말이냐면, 유튜브 페이지를 예로 들어보겠다.

  만약 이런 쇼츠영상들이 담긴 웹페이지를 만든다고 치자. 영상 박스가 얼핏봐도 10개는 되보이는 것 같다. 우리가 이런 웹페이지를 html로 만드려면, body부분에 일일이 div 태그를 10번 정도 치고, 그 안의 구조도 복붙하고... 완성한 뒤 코드를 한번 보자.

<div class="container">
	<div>
		...  
	<div/>
	<div>
		...  
	<div/>
	<div>
		...  
	<div/>
	<div>
		...  
	<div/>
	<div>
		...  
	<div/>
	<div>
		...  
	<div/>
    ...
</div>

  이런식으로 코드의 길이도 길어지고, 무엇보다 같은 내용을 가진 태그를 일일이 복붙을 해야한다는 점이다. 개발자로써 이런 부분은 도저히 참으면 안된다고 생각한다. 이런 상황에서 리액트가 빛을 발하는 것이다.

  컴포넌트의 종류에는 '함수형 컴포넌트'와 '클래스형 컴포넌트'가 있다. 대부분 함수형 컴포넌트를 사용하기 때문에 함수형 컴포넌트 기준으로 예시 코드를 작성하겠다.

function Hello () {
	return (
      <h1>Hello</h1>
    );      
}

  위와 같이 Hello라는 함수를 선언했다. 이 Hello라는 함수는

<h1>Hello</h1>

하는 HTML구문을 반환한다.

또한 화살표 함수, 익명함수(Anonymous Function)의 형태로도 작성할 수 있다.

//Arrow
const Hello = () => {
	return (
      <h1>Hello</h1>  
    );
}
      
//Anonymous
function () {
	return (
      <h1>Hello</h1>  
    );
}  
profile
프론트엔드개발자가될래요

0개의 댓글