안녕하세요 ! 오늘은 첫 시간이니 만큼.. React의 특징과 장점에 대해서 정리해 보고자 합니다.
React란 무엇인가요?
React는 UI를 구축하기 위한 Javascript 라이브러리입니다. 특히 SPA(Single Page Application)을 위한 사용자 인터페이스를 구축하는데 'Component'라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 도와줍니다. React의 주요 목적은 빠르고 확장이 가능하며 단순합니다.
- React는 facebook에서 제공해주는 프론트엔드 라이브러리
- Web/App의 View를 개발할 수 있도록 하는 라이브러리
React의 특징
React의 특징으로는 크게 5개로 구분해볼수 있겠는데요.
1) Data Flow
2) Component 기반 구조
3) Virtual Dom
4) Props and State
5) JSX
1) Data Flow
React는 데이터흐름이 한방향으로만 흐르는 단방향 데이터 흐름을 가집니다.
Augular.js 와 같은 양방향 데이터 바인딩은 대규모 애플리케이션의 경우 데이터 흐름을 추적하기가 힘들고 복잡해지는 경향이 있어 복잡한 프로젝트에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능하기가 쉽도록 단방향 흐름을 가지도록 하였다고 합니다.
2) Component기반 구조
React는 View를 여러 컴포넌트를 쪼개서 만듭니다.
한 페이지내에서도 여러부분을 독립된 컴포넌트로 만들고 이 컴포넌트를 조립해 화면을 구성합니다.
const Gallery = () => {
const [cats, setCats] = useState(catList) //고양이 데이터배열
const [currItem, setCurrItem] = useState(cats[0]) //선택한 고양이 사진상태 설정
const onView = (id) => { //해당 id의 고양이 사진을 찾아라
setCurrItem(cats.find(item => item.id === id)) //find() : 배열함수중 해당값만 찾아줌
}
return (
<div className='Gallery'>
<GalleryBig cats={cats} currItem={currItem} onView={onView} />
<GalleryList cats={cats} currItem={currItem} onView={onView}/>
</div>
);
};
export default Gallery;컴포넌트로 구성되어 있기 때문에, 전체코드를 파악하기가 상대적으로 쉽습니다. 이렇게 기능단위 UI단위로 캡슐화 시켜서 코드를 관리하기 떄문에 재사용성이 높습니다. 그래서 코드를 반복하여 입력할 필요가 없이 컴포넌트만 import하여 사용하면 된다는 간편함이 있고, 애플리케이션이 복잡해 지더라도 코드의 유지보수와 관리가 용이해지는 장점이 있습니다.
3) Virtual DOM
먼저, DOM은 Document Object Model의 약자이다. DOM은 html, css, xml 등을 트리구조로 인식하고 데이터를 객체로 간주하고 관리합니다.
→ React는 DOM을 트리구조와 같은 구조체를 Virtual DOM(가상의 Document Object Model)으로 가지고 있습니다.
4) Props and State
Props란?
Props는 부모컴포넌트에서 자식컴포넌트로 전달해주는 데이터를 말한다.
읽기전용 데이터라고 생각하면된다. 자식컴포넌트에서 전달받은 Props 변경이 불가능하고,
Props 를 전달해준 최상위 부모 컴포넌트만 이 데이터를 수정이 가능합니다.
State란?
State 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. State 는 동적인 데이터를 다룰때 사용하며 사용자와 상호작용을 통해 데이터를 동적으로 변경한다. 클래스형 컴포넌트에서만 사용이 가능하고 각각의 State 는 독립적이다.
function Welcome(props) {
return <h1> Hello, {props.name}</h1>
}
function App() {
return (
<div>
<Welcome name=“Sara” />
<Welcome name=“Cahal” />
<Welcome name=“Edite” />
</div>
);
}
이 함수는 데이터를 가진 하나의 props 객체인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React컴포넌트입니다. 이러한 컴포넌트는 JavaScript 함수이기 때문에 말 그대로 “함수 컴포넌트”라고 호칭합니다.
5) JSX
const element= <h1> Hello, world! </h1>
🤔요상하다 요상해 javascript 코드안에 html이라니?
React에서는 템플릿에 일반 Javascript를 사용하는 대신 JSX를 사용합니다. JSX는 Html의 인용을 허용하고 이러한 Html태그 구문을 사용하여 하위 구성요소를 렌더링 하는 간단한 JavaScript입니다. Html 구문은 React Framework의 Javascript호출로 처리됩니다.
