React.js?
React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 Javascript 라이브러리이다. '컴포넌트'라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.
React에는 2가지 컴포넌트 형태가 있는데 이것을 현재에는 함수형 컴포넌트의 사용 비중이 높아 이것을 알아보자.
- 하지만 클래스 컴포넌트도 알아두면 좋다. 이유는 오래전에 React로 제작한 소스코드는 클래스 컴포넌트로 되어있기 때문!
React의 필요성
React를 사용하지 않아도, HTML과 CSS, Javascript를 이용해서 웹을 만들 수 있지만, React를 이용해 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문이다.
Data Flow
React는 데이터의 흐름이 한방향으로 흐르는 단방향 데이터 흐름을 가진다.
React와 다르게 Angular, Vue는 양방향 데이터 흐름을 가진다.
컴포넌트 기반
컴포넌트는 독립적인 단위의 소프트웨어 모듈을 말한다.
즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 볼 수 있다.
function App() {
return (
<Layout>
<Header />
<Navigation />
<Content>
<Sidebar></Sidebar>
<Router />
</Content>
<Footer></Footer>
</Layout>
);
};Virtual DOM
DOM은 Document Object Model의 약자이다.
DOM은 HTML, CSS, XML 등을 트리구조로 인식하고, 데이터를 객체로 간주하고 관리한다. React는 이 DOM 트리구조와 같은 구조체를 가상화하여 가지고 있다.
이벤트가 발생할때마다 Vitual DOM을 만들고, 다시 그릴때마다 실제 DOM과 비교한 후 변경이 필요한 부분에 한하여 반영한다. 결과적으로 부분 수정이기 때문에 효율성과 속도 두가지 방면을 개선하였다.
Props 와 State
-
Props
Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말합니다.
쉽게 읽기 전용 데이터라고 생각하면 될 것 같습니다! 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있습니다. -
State
State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있습니다. state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용합니다. 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적입니다.
함수형 컴포넌트
React에서 함수 컴포넌트는 더 간단하게 컴포넌트를 작성하는 방법이며 state 없이 render 함수만을 가집니다. React.Component를 확장하는 클래스를 정의하는 대신 props를 입력받아서 렌더링할 대상을 반환하는 함수를 작성할 수 있습니다. 함수 컴포넌트는 클래스로 작성하는 것보다 빠르게 작성할 수 있으며 많은 컴포넌트를 함수 컴포넌트로 표현할 수 있습니다.
function Square(props) { return ( <button className="square" onClick={props.onClick}> {props.value} </button> ); }
- 위 코드를 보니 이해하기 쉽죠? Javascript와 HTML이 합쳐진 위 문법을 JSX라고 합니다.
JSX란 ?
Javascript를 확장한 문법입니다.
React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다.
React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.
React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.
결론
간략하게 React.js에 대하여 알아보았습니다. 다음 포스트에서도 계속해서 React.js에 대하여 공부해봅시다.
