1. JSX
const hi = <p>Hi</p>;JSX는 JavaScript의 확장버전(syntax extension for JavaScript)이다.
HTML 문법을 JavaScript 코드 내부에 써주는 것이 특징이며, 변수에 저장할 수도 있고 함수의 인자를 넘길 수도 있다.
1) JSX attribute
태그에 attribute(속성)을 주고 싶을 때는 항상 ""(쌍따옴표)로 감싸주어야 한다.
또한 실제 HTML에 쓰는 attribute name(속성명)과 다를 수 있으므로 유의하여야 한다. (ex. class => className)
2) Self-Closing Tag
JSX에서는 어떤 태그라도 self closing tag가 항상 가능하다.
3) Nested JSX
- 중첩된 요소를 만들기 위해서는 () 소괄호로 감싸주어야 한다.
- 항상 하나의 태그로 시작해야 한다.
- div로 감싸기 힘든 경우에는 <></>로 sibling된 요소들을 감싸줄 수 있다.
4) Rendering
html 요소, 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링이라고 한다.
이 요소가 DOM node에 추가되어 화면에 렌더되기 위해서 ReactDOM.render 함수를 사용한다.
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모 요소)를 전달한다.
2. Component와 Props
1) Component란?
component란 재사용 가능한 UI 단위를 뜻한다.
컴포넌트는 독립적으로, 재사용가능한 코드로 관리할 수 있고, 하나의 컴포넌트에 필요한 html, css, js(validation check)를 모두 합쳐서 만들 수 있다.
또한 컴포넌트는 함수와 비슷하기 때문에, input을 받아서 return할 수 있다.
React 컴포넌트에서는 input을 props라고 말하고 return은 화면에 보여져야할 React 요소가 return된다.
2) Component 만들기
React에서는 컴포넌트를 class나 함수로 만들 수 있다.
어떤 때에는 함수로 만들면 좋고, 어떤 때에는 class로 만들어야 한다.
현재는 함수로 만드는 방법이 간편하고 더욱 많이 사용되고 있지만, class를 이용해 컴포넌트를 만드는 flow에 대한 이해가 먼저 생긴 후 이를 함수로 옮기는 방식으로 점차 넘어가고자 한다.
- 함수로 Welcome 컴포넌트 구현하기
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}- class로 Welcome 컴포넌트 구현하기
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}class로 컴포넌트를 만들기 위해서 React.Component를 extend해서 생성해야 한다.
컴포넌트를 생성할 때 render() 메서드는 무조건 정의해야 하고, return도 해주어야 한다.
3) component 사용
위처럼 정의한 컴포넌트는 함수/class 이름으로 사용할 수 있다.
우리가 정의한 컴포넌트를 사용할 때, 원하는 attribute를 얼마든지 추가할 수 있다.
그러면 Welcome 컴포넌트에서 parameter로 해당 attribute를 받아서 사용할 수 있는데, 이를 props(property)라고 한다.
.(dot)으로 속성명에 접근 가능하고, props.속성명으로 속성 값을 가져올 수 있다.
3. Component와 State
1) State
state란 말 그대로 컴포넌트의 상태 값이다.
state와 props 둘 다 object이고, 화면에 보여줄 정보(상태)를 가지고 있다는 점에서 서로 비슷한 역할을 한다.
props는 컴포넌트를 사용하는 부모 쪽에서 전달해주어야만 사용할 수 있고(parameter처럼), state는 컴포넌트 내에서 정의하고 사용한다.
class Button extends React.Component {
constructor() {
super();
this.state = {
clicked: false
}
}
render() {
return (
<div
className="btn"
onClick={()=>{this.setState({ clicked: !this.state.clicked })}}
>
{this.state.clicked ? '좋아요' : '싫어요'}
</div>
);
}
}
ReactDOM.render(
<Button />,
document.getElementById('root')
);this.setState() 함수를 통해 click 시 clicked라는 state를 업데이트할 수 있다.
!this.state.clicked로 업데이트한다는 말은, 현재 clicked의 반대로(true면 false, false면 true) 저장한다는 뜻이다.
onClick이 달려있는 <div / >를 클릭할 때마다, clicked 상태가 true나 false로 업데이트된다.
constructor는 class의 instance가 생성될 때 항상 호출되는 함수(생성자)이다.
초기화할 값들을 constructor에서 세팅해준다고 볼 수 있다.
이 안에 super()라는 키워드는 꼭 작성해야 하며, 그래야 React.Component class에 있는 메서드들 (ex.render)을 사용할 수 있다.
