React Basic

Basic about React.

규모가 커지고 복잡성이 높아진 현실에서, 많은 양의 데이터를 관리하고 코드 유지보수를 수월하게 할 수 있도록 등장한 Frontend Framework(Library) 중 하나. React는 페이스북에서 개발하고 관리하는 사용자 인터페이스 제작을 위한 JavaScript 라이브러리이다.

다른 라이브러리와 달리 오로지 view만 담당하며, 그에 따라 내장되어 있는 기능이 부족해 third-party 라이브러리(ex. React-router)를 함께 사용한다. React의 가장 큰 장점은 페이스북의 지속적인 관리로 생태계가 활성화되어 있다는 점이다.

또한 React는 가상 돔(Virtual Dom) 을 통해 UI의 변경된 부분만 선정하여 랜더링할 수 있게 한다.

What is Component?

컴포넌트는 재활용 가능한 UI 구성 단위로, 코드 내에서 자주 쓰이는 부분은 컴포넌트화 하여 코드를 재작성하지 않아도 필요한 부분에 활용할 수 있도록 한다.

• 재활용하여 사용 가능
• 코드 유지보수가 수월
• 코드의 간결화로 페이지 구성을 한 눈에 파악 가능
• 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다.

What is State?

State는 단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값을 말한다. 화면에 보여질 컴포넌트의 UI 정보를 지니고 있는 객체이며, 컴포넌트 내에서 얼마든지 데이트가 변경될 수 있다.

What is Props?

Props(properties)는 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체이며, 오로지 읽기 전용으로 사용된다. Props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있다.