열심히 따라가느라고 개요만 쓰고 있는 나란 존재...화이팅입니다!
React
html을 통해 구조를 하드코딩하게 되면 그 단위는 페이지 단위가 됩니다.
물론 별 기능이 많지 않은 앱을 구현한다면 html만으로 충분합니다.
하지만 지금은 웹 페이지, 앱들은 10개 이상의 기능을 가진 것들도 존재합니다. 이것을 단순히 js 하나로만 다루기에는 너무 복잡해진 것이 현실입니다.
그래서 페이지 단위가 아닌 컴포넌트 단위로 앱을 구현할 수 있도록 도와주는 라이브러리가 바로 React이다.
React의 특징
1) 변하지 않는 값 props와 변하는 값 state
props는 변하지 않는 값입니다.(버튼을 누르는 기능, 성별, 디폴트 데이터 등등)
props를 자식들에게 넘겨주어 컴포넌트의 기능을 구현하거나 활용할 수 있게 해줍니다.
단 props는 순수 함수로 작성되어야 합니다!(Side Effect로 작성하면 안된다.)
state는 변하는 값입니다.(장바구니 물품의 숫자, 체크에 따른 상태변화 등등)
state를 바꾸기 위해서는 this.setState(...)를 사용하여 변화시켜줘야 합니다.(이렇게 바꿔야 하는 이유는 Lifecycle때문에)
2) 데이터는 아래로 흐른다.
반드시 부모로부터 받은 데이터를 자식으로 보내지게 되어있는 단반향 흐름을 가지고 있습니다. 이를 통해서 디버깅이 쉬워지고 구조가 직관적으로 작성되어 재사용을 가능하게 만듭니다.
3) JSX
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);공식 문서에 나와있는 JSX 예문입니다. 자바스크립트를 확장한 문법이며 html 엘리먼트에 컴포넌트를 삽입하여 rendering을 해줌으로써 컴포넌트 중심의 구조를 만드는 데에 도움을 줍니다.
꼭 React를 사용하는 데에 JSX를 사용해야 하는 것은 아닙니다. 하지만 가독성을 위해 JSX를 사용하는 것이 권장되는 것입니다.
