이 시리즈는 리액트 공식문서 및 '리액트를 다루는 기술(김민준 저)', '리액트 교과서(아자트 마르단 저)'를 바탕으로 작성되었습니다. 개인 노션에만 정리한 내용을 옮기다 보니 저도 모르게 출처 없는 타 블로그 등의 글이 있을 수 있습니다. 혹 출처를 아시는 분들은 알려주시면 감사하겠습니다.
const element = <h1>Hello, world!</h1>;
<!-- 스크립트 태그 추가 - CDN -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- JSX를 JS로 변환시켜주는 바벨 추가 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- body 태그 닫히기 전에 리액트 코드 작성 -->
<!-- 바벨이 트랜스파일링 할 수 있도록 type 속성 지정 -->
<script type="text/babel">
// React 코드 작성
</script>
// JSX
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
// JS로 변환된 JSX
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React.createElement()
함수를 사용하면 컴포넌트를 렌더링 할 수 있다. 하지만 이 방식은 JSX를 사용하는 방식보다 불편하다. JSX를 사용하면 쉽고 편하게 UI를 렌더링 할 수 있다.ReactDOM.render(element, container[, callback])
ReactDOM.render()
함수를 사용해야한다. 이 함수는 컴포넌트를 페이지에 렌더링하는 역할을 하며, react-dom 모듈을 불러와 사용할 수 있다.element
: JSX로 작성한 화면에 출력할 내용container
: 첫 번째 인자인 JSX를 랜더링 해서 보여줄 DOM 안의 위치ReactDom.render(
<h1>Hello World</h1>,
document.body
);
<div>, <p>, <span>, <a>
같이 짝이 있는 태그의 경우 반드시 닫는 태그가 존재해야 한다. 그렇지 않을 경우 에러가 발생한다.<img/>, <input/>, <br/>
같은 단독 태그(self-closing tag)의 경우에는 반드시 태그를 닫아줘야 한다. 그렇지 않을 경우 에러가 발생한다.ReactDOM.render(
<div>
Hello
</div>
<div>
Bye
</div>,
document.getElementById('root')
);
ReactDOM.render(
<div>
<div>
Hello
</div>
<div>
Bye
</div>
</div>,
document.getElementById('root')
);
배열 문법 사용
ReactDOM.render(
[ // 리액트 엘리먼트 배열을 반환
<div key="1">Hello</div>, // 복수의 아이템을 리턴할 경우
<div key="2">Bye</div> // 각 엘리먼트에 key 속성과 고유값을 지정해야 한다.
],
document.getElementById('root')
);
리액트 v16.2.0 부터 추가된 프래그먼트(Fragment) 패턴 사용
ReactDOM.render(
<React.Fragment> // React.Fragment 컴포넌트로 리액트 엘리먼트를 감싸준다.
<div>Hello</div>
<div>Bye</div>
</React.Fragment>
document.getElementById('root')
);
// 프래그먼트 축약 구문 사용
ReactDOM.render(
<> // 빈태그로 감싸주기
<div>Hello</div>
<div>Bye</div>
</>
document.getElementById('root')
);
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>; // Hello, Josh Perez
ReactDOM.render(
element,
document.getElementById('root')
);
//---------------------------------------------------------------------------
ReactDOM.render(
<p>Random number : {Math.random() * 100}</p>,
document.getElementById('root')
);
// 중괄호는 표현식 먼저 평가 돼 그 결과를 리턴하게 만든다.
//---------------------------------------------------------------------------
// 주석 사용하기
// JSX에서 주석은 {}로 감싸준다. 여러 줄 주석만 사용 가능하다.
ReactDOM.render(
<div>
<p>Hello</p>
{/* 주석은 이렇게 작성합니다. */}
<p
className='react' // 시작 태그를 여러줄로 작성 시 주석 작성 가능
>World</p>
// 하지만 이런 주석이나
/* 이런 주석은 페이지에 그대로 노출됩니다.*/
</div>,
document.getElementById('app')
);
class App extends Component {
render() {
let name = 'React';
return (
<div>
{
name === 'React' ? (
<h1>This is React.</h1>
) : (
<h1>This is not React.</h1>
)
}
</div>
);
}
}
class App extends Component {
render() {
let name = 'React';
return (
<div>
{
name === 'React' && <h1>This is React.</h1>
}
</div>
);
}
}
class App extends Component {
render() {
let name = undefined;
return (
<div>
{
name === 'React' || <h1>This is React.</h1>
}
</div>
);
}
}
// JSX에서 프로퍼티 명은 카멜케이스로 작성되어야 한다.
const element = <div tabIndex="0"></div>;
// 속성값 정의 시 JS 표현식을 사용고자자 할 경우 따옴표를 사용하지 않는다.
const element = <img src={user.avatarUrl}/>;
var element = <div style="color:red;">Hello World</div>; // 인라인 CSS 사용불가
//--------------------------------------------------------------------
// JXS에서 CSS를 적용하기 위해서는 스타일 객체를 만들어야 한다.
var styleObject = {
color: "#333",
padding: 0,
backgroundColor: "black", // 스타일 각체의 속성은 모두 camelCase로 작성한다.
fontSize: "32"
}
var element = <div style={styleObject}>Hello World</div>;
//--------------------------------------------------------------------
// 스타일 객체를 style 속성 내부에 선언 가능
var element =
<div style={ { color: "#333", fontSize: "32" } }>
Hello World
</div>;
ReactDOM.render(
<div>
<MyCustomComponent/>
</div>,
document.getElementById('root')
);
Babel은 JSX를 React.createElement() 호출로 트랜스파일한다. 때문에 첫 번째 코드는 두 번째 코드로 트랜스 파일 된다.
// 개발자가 작성한 코드
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
// babel로트랜스 파일된 코드
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React.createElement()
는 버그가 없는 코드를 작성하는 데 도움이 되도록 몇 가지 검사를 수행 후, 기본적으로 다음과 같은 객체를 생성한다.
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
}
이렇게 생성된 객체를 “React 엘리먼트”라고 하며, 이는 화면에 표시하려는 항목에 대한 설명이라고 할 수 있다. React는 이러한 객체를 읽고 DOM을 구성하고 최신으로 유지하는 데 이러한 객체를 사용한다.