0. React란?
페이스북이 만든 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리.
• React의 특징
① JSX
자바스크립트 XML의 약자이며, 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트의 확장된 문법이다.
HTML과 비슷하게 생겼지만 자바스크립트이다!
const element = <div>Hello, React!</div>② Component
컴포넌트는 앱을 구성하는 최소의 단위이다. 리액트는 컴포넌트 기반의 라이브러리이기 때문에 개발 시 독립적인 단위로 분할하여 구현한다. 따라서, 코드의 재사용성이 높아지고 유지보수가 용이해진다는 이점이 있다.
③ Virtual DOM
가상 돔은 기존의 돔의 한계를 벗어나기 위해 나온 대안으로, 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념이다. 가상 돔은 변화된 부분을 자동으로 감지하여 업데이트 한다.
1. JSX 문법
JSX는 자바스크립트의 확장된 문법으로, 자바스크립트 안에서 HTML을 사용할 수 있다. JSX를 사용하면 자바스크립트로 작성하는 것보다 코드가 간결해져서 편의성이 향상된다. 문법 오류를 줄일 수 있고, 재사용을 할 수 있기에 생산성이 향상 된다.
JSX코드는 Babel이 자바스크립트로 변환해준다.
리액트 import 하기 import React from 'react';
const App = () => {
return (
<div>
<h1>Hello</h1>
<h1>Welcome to unknown's blog</h1>
</div>
);
}• 반드시 하나의 부모 요소가 감싸는 형태여야 한다.
최상단은 하나의 요소로 감싸줘야 하는 데, <div></div> 외에도 <Fragment></Fragment> 혹은 그 축약형인 <></>로 감싸줄 수 있다.
// 이런 식으로 여러 개의 형제를 리턴하는 형태면 에러가 발생
const App = () => {
return (
<div>Hello</div>
<div>unknown's blog</div>
);
}
// 최상단은 하나의 부모로 감싸줘야한다.
const App = () => {
return (
<div> // <Fragment>, <>
<div>Hello</div>
<div>unknown's blog</div>
</div> // </Fragment>, </>
);
}• HTML 내에 자바스크립트 표현식을 작성하려면 {}로 감싼다.
const App = () => {
const name = "kim unknown";
return <h1>my name is {name}</h1>
// my name is kim unknown
}• 클래스는 class가 아닌 className으로 작성한다.
const App = () => {
return (
<div className="first">Hello World</div>
);
}• 스타일은 string이 아닌 object로 작성한다.
css의 속성명은 camelCase로 적는다.
ex) font-size → fontSize / margin-top → marginTop
const App = () => {
return (
<div style={{fontSize:'12px', color: 'black', backgroundColor: 'white'}}>
Hello World
</div>
);
}px의 경우 px을 생략하고 숫자만 적는 방법도 가능하다.
! 스타일에 중괄호를 2개 작성하는 이유
바깥쪽의 {중괄호}는 여기서부터 자바스크립트 표현식을 사용하겠다는 의미이고,
안쪽의 {중괄호}는 자바스크립트 object의 시작을 알리는 의미이다.
• 태그는 무조건 닫혀야 한다.
HTML에서는 br이나, img 같은 태그는 닫는 태그 없이 사용했었다. 그러나 jsx에서는 모든 태그는 필수로 닫혀야 한다.
<div>
<img src="#" />
<br />
</div>2. 컴포넌트(Component)
컴포넌트는 리액트에서 페이지를 구성하는 최소한의 단위이다. 컴포넌트 기반으로 개발하면 코드의 재사용이 가능해지고 유지보수가 편리해진다.
• 컴포넌트명은 대문자로 시작해야 한다.
아래와 같이 컴포넌트를 만들고 <컴포넌트명 /\>로 사용할 수 있다.
const name = "unknown"
function SayHi() {
return <p>Hi, {name}!</p>
}
const element = <SayHi />; // Hi, unknown!컴포넌트의 종류는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나눌 수 있다.
• 함수형 컴포넌트(Function Component)
v16부터 함수형 컴포넌트가 발표되었고, 현재는 주로 함수형 컴포넌트를 사용한다.
export 해주면 다른 파일에서 import하여 사용할 수 있다. 렌더링을 할 때는 ReactDOM.render() 를 사용한다. <함수명 />과 같은 형태로 사용 가능하다.
function HelloThere(props) {
return <div>Hello, {props.name}!</div>;
}
// 렌더링
ReactDOM.render(<HelloThere />, document.getElementById('root'));• 클래스형 컴포넌트(Class Component)
함수형 컴포넌트가 발표되기 이전 초기의 리액트는 클래스형 컴포넌트를 사용하였다.
클래스형 컴포넌트는 React.Component를 상속(extends) 받아야 한다. 렌더링은 해당 클래스형 컴포넌트에서 render()를 구현해주면 된다. <클래스명 />과 같은 형태로 사용 가능하다.
class HelloThere extends React.Component {
render() { // 해당 컴포넌트 내에서 render
return <div>Hello, {this.props.name}!</div>;
}
}
// 렌더링
ReactDOM.render(<HelloThere />, document.getElementById('root'));* 속성 (props)
props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이며, 컴포넌트 내부에서 값을 변경할 수 없다. 즉, 컴포넌트 간에 어떠한 값을 주고받을 때 props를 사용한다.
! 참고로 데이터는 부모요소에서 자식요소로만 전달이 가능하다.
* 상태 (State)
컴포넌트의 현재 저장된 값을 state라고 한다. 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. 즉, 컴포넌트 내에서 동적인 데이터를 다룰 땐 state를 사용한다.
