XML
과 매우 비슷하다.브라우저
에서 실행되기 전 코드가 번들링
되는 과정에서 Babel
을 사용하여 일반적인 자바스크립트
형태의 코드로 변환된다.JSX
에서 작성할 수 있다.부모 요소
하나로 감싸야 한다.import React from 'react';
function App() {
return (
<h1>리액트</h1>
<h2>작동 테스트</h2>
)
}
export default App;
부모 요소
하나에 감싸져 있지 않기 때문에 다음과 같이 수정해야 한다.function App() {
return (
<div>
<h1>리액트</h1>
<h2>작동 테스트</h2>
</div>
);
}
하나의 요소
로 꼭 감싸 주는 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조
로 이루어져야 하는 규칙이 있다.div
요소를 사용하고 싶지 않은 경우에는 React v16
이상 부터 도입된 Fregment
라는 기능을 사용하면 된다.자바스크립트
표현식을 쓸 수 있는데, JSX
내부에서 코드를 { }
로 감싸면 된다.function App() {
const name = '박대경';
return (
<div>
<h1>{name} 안녕</h1>
<h2>작동 테스트</h2>
</div>
);
}
If
문을 사용할 수 없다.렌더링
해야 할 때는 JSX 밖에서 if 문을 사용하여 사전에 값을 설정하거나, { }
안에 조건부 연산자를 사용하면 된다.function App() {
const name = '박대경';
return (
<div>
{name === '박대경' ? (
<h1>박대경 입니다.</h1>
) : (
<h2>박대경이 아닙니다.</h2>
)}
</div>
);
}
// 👉 방법 1
function App() {
const name = '박대경';
return <div>{name === '박대경' ? <h1>박대경 입니다.</h1> : null}</div>
}
// 👉 방법 2
function App() {
const name = '박대경';
return <div>{name === '박대경' && <h1>박대경 입니다.</h1>}</div>
}
&&
연산자로 조건부 렌더링이 가능한 이유는 리액트에서 false
를 렌더링할 때는 null
과 마찬가지로 아무것도 나타나지 않기 때문이다.undefined
만 반환하여 렌더링 하는 상황을 만들면 안된다.function App() {
const name = undefined;
return name;
}
// 👉 결과: ×
Error: App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
undefined
일 가능성이 있다면 OR(||)
연산자를 사용하여 해당 값이 undefined
일 때 사용할 값을 지정할 수 있어서 오류를 방지할 수 있다.function App() {
const name = undefined;
return name || 'undefined';
}
name
값이 undefined
일 때 보여주고 싶은 문구나 기본 값
을 보여주고 싶을 때 OR(||) 연산자를 사용하면 될 것 같다.DOM 요소
에 스타일을 적용할 때는 문자열 형태가 아닌 객체 형태로 넣어야 한다.background-color
처럼 -
문자가 포함되는 이름이 있는데, -
를 지우고 카멜 표기법으로 작성해야 한다.backgroundColor
로 작성function App() {
const name = '박대경';
const style = {
// 모든 표기는 카멜 표기법으로 작성
backgroundColor: 'black',
color: 'aqua',
fontSize: '24px',
fontWeight: 'bold',
padding: 16 // 단위 생략하면 px로 자동 지정된다.
}
return <div style={style}>{name}</div>
}
style
객체를 미리 선언하고 div
의 style
값으로 지정했는데, 미리 선언하지 않고 style
값을 지정하고 싶다면 div style=({...스타일 선언... })과 같이 작성하면 된다.<div class="myclass"></div>
와 같이 class
라는 속성을 설정한다.class
가 아닌 className
으로 설정 해야한다..react {
background: aqua;
color: black;
font-size: 48px;
font-weight: bold;
padding: 16px;
}
src/App.css
파일에 위와 같은 코드를 작성한 후 App.js
파일에서 상단에 App.css
를 불러온 뒤 div 요소에 className 값을 지정하면 된다.import React from 'react';
import './App.css';
function App() {
const name = '박대경';
return <div className="react">{name}</div>
}
export default App;
className
을 class
로 해도 리액트 v16 이상은 자동으로 변환시켜 주고 개발자 도구
의 console
탭에 경고만 출력한다.<input></input>
요소를 닫지 않고 열기만 하여도 문제없이 작동하지만, JSX에서는 태그를 닫지 않으면 오류가 발생한다.<input />
로 사용해도 되며 이를 self-closing 태그
라고 한다.자바스크립트
주석과 조금 다르다.function App() {
const name = '박대경';
return (
<>
{/* 주석 사용법 */}
<div
className="react" // 시작 태그를 여러 줄로 작성하면 주석 사용 가능
>
{name}
</div>
// 그러나 이런 주석이나
/* 이런 주석은 주석 처리가 되지 않는다. */
</>
);
}
JSX는 HTML하고 비슷해 보이지만 또 조금씩 틀린 부분이 있어서 조금 햇갈린다..😂
그 만큼 많이 써보면서 얼른 적응해야지..
UI
구성 단위이다.Object
를 Top
, Right
, Left
, Bottom
요소들을 레고 블럭처럼 이미 만들어진 컴포넌트를 조합하여 화면을 구성할 수 있다.부모 컴포넌트 - 자식 컴포넌트
함수형 컴포넌트
와 클래스형 컴포넌트
두 가지가 있다.import React from 'react';
import { Component } from 'react';
import './App.css';
class App extends Component {
render() {
const name = '박대경';
return <div className="react">{name}</div>;
}
}
export default App;
render
함수가 있어야 하고, 그 안에 보여줄 JSX
를 반환한다.import React from 'react';
import './App.css';
function App() {
const name = '박대경';
return <div className="react">{name}</div>;
}
export default App;
함수형 컴포넌트
보다 클래스형 컴포넌트
가 선언하기도 쉽고 메모리 자원도 덜 사용하기도 한다.클래스형 컴포넌트
와 함수형 컴포넌트
의 차이점은 클래스형 컴포넌트
는 state 기능, 라이프사이클 기능을 사용할 수 있는 점과, 임의 메소드를 정의할 수 있다는 것이다.Hooks
기능으로 해결되었다.컴포넌트 코드
를 선언해야 한다.import React from "react";
const MyComponent = () => {
return <div>첫 번째 컴포넌트</div>;
};
export default MyComponent;
함수형 컴포넌트
로, function
키워드 대신 애로우 함수
를 사용한 코드이다.파일(src/MyComponent.js)
을 import
할 때, 위에서 선언한 MyComponent
클래스를 불러오도록 설정하는 코드이다.export default MyComponent;
import
구문을 사용하는 두 번째 줄이 방금 만든 MyComponent 컴포넌트
를 불러오는 코드이다.import React from 'react';
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent />;
}
export default App;
근데 생각해보니까 왜 App.js
에 있는 화면이 메인으로 띄워질까??🤔
리액트는 번들러
를 활용한다고 이해했었다. 특히 CRA를 활용하여 Webpack
과 Babel
의 설정을 하지 않고 자동으로 구축해줘서 몰랐는데 node_modules
에 가보니 Webpack
이 알아서 설치가 되어있었다.
entry point
부터 시작해서 필요한 모듈을 다 불러온 뒤 번들링하여 한 파일로 합쳐서 bundle.js
에 저장하는 역할을 한다.entry point
가 index.js
로 정의 되어있었다.//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();