- React란?
- Virtual DOM
- Components
- Props
- React란?
- 프론트엔드 웹개발을 위한 인기있는 자바스크립트 라이브러리 중 하나
- Interactive한 웹사이트에서는 변화가 발생할때마다 DOM (Document Object Model)의 업데이트가 필요하다.
- 위와 같은 상황에서 일반적으로 많은 리소스가 발생하며 느리다.
- DOM을 조작하는 다른 라이브러리와 비교하여 React는 Virtual DOM을 사용하여 변경된 웹 사이트의 일부만 업데이트가 가능하다.
- 그럴경우, 사용되는 리소스가 줄어들어 속도측면에서 빠르다는 장점이 있다.
- JSX파일로 구성된다.
- JSX 표현식이 컴파일되면 React요소를 나타내는 JavaScript 객체로 변환된다.
- 그 후, React는 필요한 요소만 해당 HTML DOM을 빌드하고 브라우저에 표시한다.
- React 앱은 ReactDOM.render()를 한 번 호출한다.
Virtual DOM
- React는 필요한 요소만 업데이트한다.
- 요소가 변경되면 Virtual DOM에서 먼저 업데이트된다.
- Virtual DOM이 단순한 객체로 표현되기 때문에 이 프로세스는 빠르게 진행된다.
- 그 후, React는 Virtual DOM을 이전 상태와 비교하고 DOM을 원하는 상태로 만드는데 필요한 업데이트만 적용한다.
Components
- 컴포넌트는 페이지를 독립적이고 재사용 가능한 부분으로 분할하기 위해 사용된다.
- ex) 기존에 진행했던 프로젝트에서는 제품과 장바구니, 구매, 결제 등을 나누었고 그 안에서 세부적으로 개별적인 제품에 대한 정보나, 장바구니 추가와 삭제 등에 대한 부분을 컴포넌트로 분리했었다.
- 리액트에서 컴포넌트를 구성하는 방식에는 Functional Components와 Class Components가 있다.
- 컴포넌트의 이름을 구성할 때 첫글자는 대문자로 시작해야한다.
- 그렇지않으면 일반 HTML 구문으로 인식하여 에러가 발생할 수 있다.
Class components
- 클래스컴포넌트에는 페이지에 표시되어야하는 내용을 알려주는 render함수가 내부에 있어야한다.
class Hello extends React.Component {
render() {
return <h1>Hello world.</h1>;
}
}
Functional Components
- 함수형으로 컴포넌트를 구성한 예시
function Hello () {
return <h1> Hello world. </ h1>;
}
- Hello 컴포넌트를 구성하고, 페이지에 렌더링을 하기 위해서는 아래와 같은 코드를 추가해야한다.
- index.js 파일을 생성하여 쪼개서 실행하는게 대부분.
- 과거에는 클래스 컴포넌트를 많이 사용했지만, 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(Hook)방식을 지원해 주어서 현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다.
import React from 'react';
import ReactDOM from 'react-dom';
const rootElement = document.getElementById('root');
ReactDOM.render(
<Hello />
rootElement
);
Props
- Props의 개념은 참 어렵다고 느껴졌던 개념 중 하나였는데 이것도 보다보니 어느정도 이해가 된 것 같다. 잘 이해하고 넘어가지 않으면 뒷부분은 더 이해가 안되기때문에 Props의 개념은 꼭 짚고 넘어가자!
- Props는 프로퍼티(properties) : 컴포넌트 속성을 설정할 때 사용하는 표현
- 조금 풀어서 설명하면 컴포넌트들 끼리 값을 전달하는 수단이라고 할 수 있다.
- 예를들어, App 컴포넌트에서 Test 컴포넌트를 사용할 때 value라는 값을 전달해주고 싶다면 아래와 같이 Props로 값을 전달해줄 수 있다.
- 컴포넌트에게 전달되는 props는 파라미터를 통해 조회 가능하다.
// App.js
import React from 'react';
import Test from './Test';
const App = () => {
return (
<Test value="react" />
);
}
export default App;
// Test.js
import React from 'react';
const Test = (props) => {
return (
<div>
props의 값 가져오기 : {props.value}
</div>
)
}
export default Test;
- hook 방식에서는 구조분해 방식으로 props를 전달한다.
- 어떤 것을 넘길지 명확하고 편리해서 구조분해 방식이 더 많이 쓰여지고 있는것 같다.
// App.js
import React from 'react';
import Test from './Test';
const App = () => {
return (
<Test value="react" name ="props" />
);
}
export default App;
// Test.js
import React from 'react';
const Test = ({value, name}) => {
return (
<div>
{name}의 값 가져오기 : {value}
</div>
)
}
export default Test;
컴포넌트 내 컴포넌트 사용
- Test 컴포넌트 두 번 사용
- 일반적으로 복잡한 구성을 재사용 가능한 여러 개의 컴포넌트로 분할하는 것이 좋다.
// App.js
import React from 'react';
import Test from './Test';
const App = () => {
return (
<Test value="react" name ="props" />
<Test value="javascript" name ="this" />
);
}
export default App;