JSX 소개
const element = <h1>Hello, world!</h1>;JSX는 위처럼 JavaScript를 확장한 문법이다.
JSX는 React의 element를 생성한다.
JSX란?
마크업과 로직을 느슨하게 연결하여 관심사를 분리 seperation of concerns 한다.
React에서 JSX이 필수는 아니다.
JSX에 표현식 포함하기
중괄호{}를 사용한다.
JSX도 표현식이다.
즉, 객체처럼 변수에 할당하고, 인자로서 받고, 함수로부터 반환할 수 있다.
unction getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}JSX 속성 정의
따옴표로 문자열 리터럴을 정의하던가, 중괄호로 js 표현식을 삽입할 수도 있다.
const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;따옴표와 중괄호 두 가지를 동시에 사용하면 안 된다.
경고
JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용합니다.
예를 들어, JSX에서 class는 className가 되고 tabindex는 tabIndex가 됩니다.
JSX로 자식 정의
태그가 비어있다면 XML처럼 />로 닫는다.
JSX 태그는 자식을 포함할 수 있다.
JSX는 주입 공격을 방지한다.
모든 항목은 렌더링 되기 전에 문자열로 변환되어 XSS를 방지한다.
XSS(Cross-Site Scripting) 이란 웹 애플리케이션에서 일어나는 취약점으로 관리자가 아닌 권한이 없는 사용자가 웹 사이트에 스크립트를 삽입하는 공격 기법입니다.
출처:https://noirstar.tistory.com/266
JSX는 객체를 표현한다.
Babel은 JSX를 React.createElement() 호출로 컴파일 한다.
다음 두 코드는 동일하다.
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);결과적으로 아래의 객체를 생성한다. 이를 React Element라고 한다.
// 주의: 다음 구조는 단순화되었습니다
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};엘리먼트 렌더링
엘리먼트는 화면에 표시할 내용을 기술한다.
엘리먼트는 컴포넌트의 구성 요소이다.
DOM에 엘리먼트 렌더링하기
React 앱은 일반적으로 하나의 루트 DOM 노드가 있다.
React 엘리먼트를 루트 DOM 노드에 렌더링하려면 ReactDOM.render()로 전달하면 된다.
const element = <h1>Hello react</h1>;
ReactDOM.render(element, document.getElementById('root'));
렌더링 된 엘리먼트 업데이트하기
React 엘리먼트는 불변객체로 생성 이후에는 자식이나 속성을 변경할 수 없다. 엘리먼트는 특정 시점의 UI라고 할 수 있는데 이 UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 렌더링하는 것이다.
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);변갱된 부분만 업데이트하기
React DOM은 새로운 엘리먼트와 이전 엘리먼트를 비교해 필요한 경우에만 DOM을 업데이트한다.
Components와 Props
개념적으로 컴포넌트는 JavaScript 함수와 유사하다. props라고 하는 입력을 받아 화면에 표시될 엘리먼트를 반환한다.
함수 컴포넌트와 클래스 컴포넌트
컴포넌트를 정의하는 가장 간단한 방법은 JS 함수를 작성하는 것이다.
function Welcome(props) {
return <h1>Hello {props.name}</h1>;
}두 번째 방법은 ES6 class를 이용한다.
class Welcome extends React.Component {
render() {
return <h1>Hello {this.props.name}</h1>;
}
}컴포넌트 렌더링
const element = <div />;
const element = <Welcome name="Sara" />;React 엘리먼트는 DOM 태그는 물론 사용자 정의 컴포넌트로도 나타낼 수 있다.
React 가 사용자 정의 컴포넌트로 작성된 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달하는데 이를 props라고 한다.
컴포넌트 합성
컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있다.
예를 들어 Welcome 을 여러 번 렌더링하는 App 컴포넌트를 만들 수 있다.
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}컴포넌트 추출
컴포넌트를 여러 개의 작은 컴포넌트로 나눌 수 있다. 재사용 가능하도록 모듈화를 시킬 수 있다.
props 는 읽기 전용
컴포넌트는 자체 props를 수정할 수 없다. 즉 컴포넌트는 자신의 props를 다룰 때 반드시 순수함수처럼 동작해야 한다.
동적인 UI 표현을 위한 값들의 기억은 state로 한다.
State와 Lifecycle
state와 lifecycle 메서드는 클래스 컴포넌트에서만 가능하다.
state
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date(),
};
}
}state는 위 코드처럼 작성할 수 있다.
state 사용 시 주의사항
state를 직접 수정하면 안된다.
this.state.comment = 'Hello';위처럼 직접 수정하면 안된다. 대신 setState()를 사용한다.
this.state를 직접 지정할 수 있는 곳은 contructor 뿐이다.
tick() {
this.setState({
date: new Date(),
});
}setState()는 state 값을 변경한다. React는 state가 변경되면 다시 render()을 호출하고 달라진 값을 DOM에 업데이트한다.
state 업데이트는 비동기적일 수 있다.
사실 React는 state가 변경 될 때마다 매번 렌더링하는 것은 아니다. 퍼포먼스의 효율을 위해 여러 차례 setState가 있을 경우, 가장 적절한 시기에 한꺼번에 렌더링한다.
따라서 비동기적 asychronous 이라고 할 수 있다.
this.setState((state, props) => ({
counter: state.counter + props.increment
}));비동기적이라 발생하는 문제를 해결하기 위해 위와 같이 함수를 인자로 넘길 수 있다. 인자인 화살표 함수는 이전 state(==prevState==가장 최신의 state)를 받아서 사용하기 때문이다. 필요하다면 props도 똑같이 넘긴다.
state 업데이트는 병합된다.
setState()를 호출할 때 React는 제공한 객체(인자)를 현재 state로 병합한다.
Lifecycle 메서드
컴포넌트 호출 후 렌더링까지의 과정을 마운팅 mounting 이라고 한다.
componentDidMount()
componentDidMount() {
this.timerID = setInterval(() => this.tick(), 1000);
}
컴포넌트가 DOM에 렌더링 된 후에 실행되는 메서드다.
props와 state외에도 필요하다면 부가적인 필드를 자유롭게 클래스에 추가할 수 있다. 위에선 timerID를 말한다.
componentWillUnmount()
componentWillUnmount() {
clearInterval(this.timerID);
}컴포넌트가 제거되는 것을 언마운트 umount 라고 한다. 언마운트 되기 전 호출되는 메서드다.
데이터는 아래로 흐른다.
컴포넌트는 자신의 state를 자식 컴포넌트에 props로 전달할 수 있다.
이를 하향식 top-down 또는 단방향식 데이터 흐름이라고 한다.
