React 1 - JSX

React.js는?

React를 쓰는이유?

1. 컴포넌트 별로 따로 분리되어 있어서 재사용이 용이하고 유지보수가 가능하다.
2. JSX라는 React의 문법이 HTML과 비슷하여 예측가능한 개발이 가능하다.
3. Virtual DOM이 바뀐 부분만 새로 데이터를 로드해주어서 효율적인 DOM 제어가 가능하다.
   이러한 이유들로 React를 사용한다고 생각하게 되었다.

:일반적으로 React 하면 가장 유명한 것이 Virtual DOM 이다. DOM은 웹의 핵심으로서, 브라우저가 화면을 그리기 위한 정보가 담겨있는 문서이다. 기존의 DOM은 페이지가 바뀔 때마다, 새 HTML파일을 로드하면서 DOM 전체를 바꾸게 되는데, Virtual DOM은 React 컴포넌트가 리턴 하는 값에 의해 만들어져서 React 가 실제 보여지고 있는 DOM과 비교를 하여 달라진 부분만 찾아내어 바꾸게 된다. 이 작업이 바로 DOM 전체를 바꾸는 것보다 훨씬 더 비용이 적게 든다. 이러한 Virtual DOM 때문에 React에서 컴포넌트 단위의 개발이 가능해진다.

Component 단위 작성

컴포넌트는 UI를 구성하는 개별적인 뷰 단위로서, UI를 개발을 레고라고 한다면, 컴포넌트는 블록 역할을 하게 됩니다. 이러한 블록을 조립해 하나의 완성품을 만드는 것과 같습니다. 이러한 특징은 하나의 컴포넌트를 여러 부분에서 사용할 수 있게 해줍니다. 가령, 웹 애플리케이션의 여러 곳에 버튼이 필요하다면, 공통된 하나의 버튼 컴포넌트를 생성하고 그 컴포넌트를 필요한 곳에 가져다 사용하면 되죠.

이러한 특징은 생산성과 유지 보수를 용이하게 합니다. 하나의 요소의 변화가 다른 요소들의 변화에 영향을 미치는 복잡한 로직을 업데이트하는 까다로운 작업에 경우, 컴포넌트의 재사용 기능으로서 보완할 수 있게 됩니다.

JSX element?

JSX attribute
태그에 attribute(속성)을 주고 싶을 때는 항상 "" 쌍따옴표로 감싸주세요
예를 들어, class를 주고 싶을 때 원래 속성명은 class이지만 JSX에서는 className을 사용해야 합니다.

그리고 JSX에서는 어떤 태그라도 self closing tag가 항상 가능합니다. <input>과 같이 하나의 태그가 요소인 경우에는 <input />와 같이 항상 /으로 끝내줘야 합니다.

<div />와 <div></div>는 같은 표현입니다.

Rendering
html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말합니다.

Component와 Props

Component 사용

1.Welcome 컴포넌트: Welcome 컴포넌트를 사용한 측(부모)에서 name이라는 attribute를 부여했나봅니다. props.name의 값을 사용하네요.
App 컴포넌트를 보니 div로 감싸져있고, <Welcome /> 컴포넌트를 세번 사용했습니다. name이라는 attribute를 부여해주었네요.
ReactDOM.render 함수로 React 요소를 그려줍니다. root라는 id를 찾아 <App /> 컴포넌트를 그려주네요.

Component의 State

state
state란 말 그대로 컴포넌트의 상태 값입니다.
state와 props는 둘 다 object 이고, 화면에 보여줄 정보(상태)를 가지고 있다는 점에서 서로 비슷한 역할을 합니다. props는 컴포넌트를 사용하는 부모쪽에서 전달해야만 사용할 수 있고(parameter 처럼), state는 컴포넌트 내에서 정의하고 사용합니다.

아래의 코드는 버튼을 눌렀을 때, state를 변화시켜서 보여줘야할 텍스트를 바꾸는 코드입니다. click이라는 하나의 state만 있지만, 여러 개의 state를 추가할 수 있습니다. 그리고 state의 이름은 원하는대로 지을 수 있습니다.

onClick={()=>{this.setState({ clicked: !this.state.clicked })}}
click하면 clicked 이라는 state를 수정합니다. this.setState() 함수로 state를 업데이트할 수 있습니다.
!this.state.clicked 으로 업데이트 한다는 말은, 현재 clicked 의 반대로(true면 false로, false면 true로) 저장한다는 말입니다.
onClick이 달려있는