[react] 기본 용어 및 사용법

* React

 UI를 만들기 위한 JavaScript 라이브러리

(라이브러리 : 소프트웨어를 개발할 때 프로그래밍 사용하는 비휘발성 자원의 모임, 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것)

 

* 리액트 엘리먼트  Element

요소, 성분 / 리액트 앱을 구성하는 요소 / 자바스크립트 객체 형태로 존재

 

DOM 엘리먼트의 가상 표현, react 앱의 가장 작은 단위로 화면에 표시할 내용을 기술한다. 브라우저 DOM 엘리먼트와 달리, react 엘리먼트는 일반 객체이며 쉽게 생성할 수 있다.

React DOM은 react 엘리먼트와 일치하도록 화면이 보여질 수 있게 DOM을 업데이트 한다. 

엘리먼트는 “컴포넌트(Component)“라는 널리 알려진 개념과 혼동되기 쉽다. 일반적으로 엘리먼트는 직접 사용되지 않고 컴포넌트로부터 반환된다.

 

const element = <h1>Hello</h1>;

 

 

* DOM 엘리먼트

실제 화면에서 보게 될 엘리먼트

 

▼ DOM 엘리먼트

 

<button class='bg-red'>
	<b>
    	Hello
    </b>
</button>

 

▼ 위의 DOM엘리먼트인 button을 나타내기 위한 엘리먼트(단순한 자바스크립트 객체)

 

{
 	type: Button,
    props:{
    	color:'red',
        children:'Hello'
    }
}

 

▼ Element는 attributes과 함께, 열린 태그로 시작하며 그 내부에 텍스트가 있고 닫는 태그로 끝나게 된다.

아래 그림과 같이 Element와 tag는 동일한 것이 아니다. 태그는 소스코드에서 엘리먼트를 시작하거나 끝내긴 하지만, 엘리먼트는 브라우저에서 페이지를 보여주는 document model인 DOM의 일부이다

 

Reference: jakeseo-javascript.js

 

 

컴포넌트

재사용이 가능한 최소 단위

React 컴포넌트는 페이지에 렌더링할 React 엘리먼트를 반환하는 작고 재사용 가능한 코드 조각.

가장 간단한 React 컴포넌트는 React 엘리먼트를 반환하는 일반 JavaScript 함수이다.

어떠한 속성들을 입력받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴해주는 것이다.

 

컴포넌트는 기능별로 나눌 수 있으며 다른 컴포넌트 안에서 사용할 수 있다.

컴포넌트는 다른 컴포넌트, 배열, 문자열 그리고 숫자를 반환할 수 있다. 

컴포넌트 이름은 항상 대문자로 시작해야 한다. (<Wrapper/> (o) <wrapper/> (x)). 

 

function App(){
  return(
  	<div>
		<Modal Welcome name={'nana'}/>   {/* Welcome 컴포넌트 */}
  	</div>
  )
}

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

 

props

리액트 컴포넌트의 속성 / 컴포넌트의 입력값으로 수정이 안되는 지정된 읽기 전용이다.

property(속성)를 줄인 prop+s 

props는 부모 컴포넌트로부터 자식 컴포넌트로 전달된 데이터를 말한다. 

컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체 (컴포넌트에 어떤 데이터를 전달하고 데이터에 따라 다른 모습의 엘리먼트를 화면에 렌더링하고 싶을 때, 해당 데이터를 props에 넣어 전달하는 것)

 

function App(props){
	return(
    	<Profile
        	name="나나"
            introduction:"안녕하세요" /*문자열은 {}사용x*/
            viewCount={1000} /*정수는 {}사용 /
            문자열 이와에 정수, 변수, 다른 컴포넌트 등이 들어갈 경우에는 {}사용,
            문자열을 {}사용해도 되긴 함*/
          />
    );
}

 

 

---

 

JSX 사용법

*  { } 중괄호를 이용한 자바스크립트 코드

XML/HTML 코드를 사용하다가 중간에 자바스크립트 코드를 사용하고 싶으면 중괄호{}를 써서 묶어준다.

{} : 자바스크립트 변수나 함수 사용 ,중괄호 안에는 무조건 자바스크립트 코드가 들어간다.

 

▼ {name} 으로 표시된 부분이 name이라는 자바스크립트 변수를 참조하기 위해 {}사용

 

const name='nana';
const element=<h1>Hi, {name}</h1>

 

*  태그의 속성에 값을 넣는 방법

큰 따옴표 " " 사이에 문자열을 넣거나, 중괄호{ }사이에 자바스크립트 코드를 넣는다.

 

큰 따옴표 " " 사이에 문자열 넣기
const element=<div tabIndex="0"></div>;

중괄호{ }사이에 자바스크립트 코드 넣기
const element=<img src={user.avatarUrl}></img>