JSX 뜻
JSX는 Javascript의 확장으로 Javascript의 이점을 그대로 사용할 수 있다. 때문에 {} 안에 Javascript 코드를 그대로 사용할 수 있다. 아래는 JSX의 예인데, 마치 HTML 태그처럼 생겼다. 하지만 HTML 태그처럼 적어도 되는건 문법적인 허용이고, 실제로는 Javascript로 변환되어 아래와 같은 React Element로 바꾼다.
const element = (
<h1 className="greeting">
Hello, World!
</h1>
)const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
Virtual DOM은 React에서 어떻게 동작하는가
React는 가상의(Virtual) DOM을 생성하는데, Component안의 state에 변화가 감지될 경우 차이(Diffing) 알고리즘을 실행한다. 이는 Virtual DOM에서 어느 부분이 바뀌었는지 알 수 있게 해주고, 바뀐 부분만 업데이트 하게된다.
| *DOM: Document Object Model, HTML | XML 문서의 프로그래밍 인터페이스다. 웹 페이지가 일종의 Document이고, 이 Document는 웹 브라우저에 의해 해석되어 렌더링된다. DOM은 이 과정에서 동일한 Document를 표현하고, 저장하고, 조작하는 방법을 제공한다. javascript를 통해 DOM을 수정하여 렌더링 결과를 바꾸거나 DOM element에 접근할 수 있다. |
빠르게 시작하기
npm이니, yarn이니 create-react-app이니 이런걸 세팅하지 않고도 곧바로 React를 시작할 수 있다. 친숙한 html 문서에서 시작하는 방법말이다. 아래 코드를 작성하여 html 문서를 하나 만들어보자! 여기서 만들 React Component들은 #root 안에 그려질 것이고, 코드는 <script type="text/babel">안에 적어둘 거다.
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
/*
ADD REACT CODE HERE
*/
</script>
</body>
</html>
Component 만들기
React는 모든게 Component 단위로 이루어져있다. 보통은 Javascript Class로 표현되어있고, render() 라는 메소드에다가 렌더링할 내용을 적어주면 된다. 아래 코드를 /* ADD REACT CODE HERE */에 붙여넣어보자!
class Hello extends React.Component {
render() {
return <h1>Hello world!</h1>;
}
}
ReactDOM.render(
<Hello />, // 방금 생성한 Hello Component (JSX로 표현)
document.getElementById("root") // #root에 렌더링 함
);
데이터 관리
React에는 두 가지의 데이터 타입이있는데 바로 prop과 state이다. 이 비유가 적당할까 모르겠지만, "나"라는 Component가 있을때 인종과 성별 등은 props, 나의 개발 실력, 포만감, 내 자산 등은 state라고 이해했다.
- state: private이며, Component 내에서 바뀔 수 있다.
- props: 외부적이고, Component 자체에서 바꿀 수 없다. 더 계층이 높은 컴포넌트에서 전달받아서 설정된다.
# Props 사용해보기
앞서만든 Hello 컴포넌트는 완전 하드코딩되어있다. 여기에다가 props를 줘서 원하는 값으로 바꿔보자! props를 이용해서 Component의 재사용성(Resuability)를 높일 수 있다. message라는 props를 추가하고, 값은 "my friend"라고 설정했다. 문법은 HTML에서 attribute를 설정하는 것과 같다.
ReactDOM.render(
<Hello message="my friend" />,
document.getElementById("root")
);이렇게 받은 props는 Component내에서 다음과 같이 접근하여 사용할 수 있다.
앞서 말한 것 처럼, {} 안에 모-든 Javascript를 표현하면된다. this.props.message.toUpperCase()라던가...ㅋㅋㅋ
class Hello extends React.Component {
render() {
return <h1>Hello {this.props.message}!</h1>;
}
}
# State 사용해보기
props는 그냥 가져다 사용할 수 밖에없었지만, state는 Component 내에서 값을 바꿀 수 있다.
Component 클래스의 생성자 constructor()에서 state를 초기화한다. 특히, super()를 호출하는 걸 잊으면 안되는데, 이를 생략할 경우 this는 초기화 되지않아서 undefined값이 되므로 유의. state에는 Object 형식으로 message라는 키를 넣어주었다.
class Hello extends React.Component {
constructor(){
super();
this.state = {
message: "my friend (from state)!"
};
}
render() {
return <h1>Hello {this.state.message}!</h1>;
}
}state를 업데이트 해 주기 위해서는 this.setState()를 호출 해 주면 된다. 예제에서는 이것은 updateMessage()로 한번 감싸주었는데, 생성자쪽에보면 해당 함수를 bind 해주는게 보인다. 이렇게 하지 않으면 updateMessage() 내부에서 this를 참조할 수 없다.
class Hello extends React.Component {
constructor(){
super();
this.state = {
message: "my friend (from state)!"
};
this.updateMessage = this.updateMessage.bind(this);
}
updateMessage() {
this.setState({
message: "my friend (from changed state)!"
});
}
render() {
return (
<div>
<h1>Hello {this.state.message}!</h1>
<button onClick={this.updateMessage}>Click me!</button>
</div>
)
}
}render()를 보면 onClick={this.updateMessage}가 있는데 이것이 버튼의 onClick 이벤트를 전달하는 방법이다. 버튼이 클릭되면, 이 이벤트는 컴포넌트의 updateMessage()를 호출하게되고, state가 바뀌어서 Virtual DOM은 그 차이만큼 다시 렌더링한다!
참고자료
developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C
medium.com/@vigowebs/frequently-asked-react-js-interview-questions-and-answers-36f3dd99f486
'프로그래밍 > JS, Node.js' 카테고리의 다른 글
| [Javascript] Canvas 태양, 지구와 달 애니메이션 그리기 (Circle animation) (0) | 2022.01.11 |
|---|---|
| DOMContentLoaded와 jQuery document.ready()의 중요한 차이점 (0) | 2021.10.31 |
| [Node.js] Selenium 사용법을 익혀보자 (11) | 2021.01.03 |
| [해결법] CasperJS: /usr/bin/env: ‘python’: No such file or directory (0) | 2021.01.03 |
| Javascript에서 라디안(radian, 호도) 구하는 함수, Math.radians() 만들기 (0) | 2018.10.28 |