코드 이해하기
VScode > 파일 > 열기 (리액트 폴더 열기) → Src/App.js 열기
Import 구문 : 특정 파일을 불러오는 것
import logo from './logo.svg';
import './App.css';function 키워드를 통해서 컴포넌트를 만듦 → 함수 컴포넌트
프로젝트에서 컴포넌트를 렌더링하면 함수에서 반환하고 있는 내용을 나타냄
함수에 반환하는 내용을 보면 HTML 같지만 JSX라는 코드이다.
//hello-react/src/App.js
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
JSX란?
JSX는 자바 스크립트의 확장 문법, XML과 유사하게 생김.
function App() {
return (
<div>
Hello<b>react</b>
</div>
);
}이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 다음과 같이 일반 자바스크립트 형태의 코드로 변환된다.
function App() {
return React.createElement("div", null, "Hello", React.createElement("b", null, "react"))
}
JSX의 장점
- 보기 쉽고 익숙하다
: 가독성이 높고 작성하기 쉽다. - 활용도가 높다.
JSX 문법
1. 감싸인 요소
컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸주어야 한다.
import logo from './logo.svg';
import './App.css';
function App() {
return (
<h1>리액트 안녕</h1>
<h2>잘 작동하니?</h2>
);
}
export default App;이런 형태의 코드를 저장한 후 웹 브라우저나 개발 서버를 실행했던 터미널을 열어보면 다음과 같은 오류가 난다.
Compiled with problems:
ERROR in ./src/App.js
Line 7:4: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (7:4)
5 | return (
6 | <h1>React 안녕</h1>
7 | <h2>잘 작동하니?</h2>
8 | );
9 | }
요소 여러 개가 부모 요소 하나에 의하여 감싸져 있지 않기 때문에 오류가 발생했으므로 다음과 같이 고쳐주면 된다.
function App() {
return (
<div>
<h1>리액트 안녕</h1>
<h2>잘 작동하니?</h2>
</div>
);
}
export default App;
왜 하나의 요소로 감싸주어야 할까?
-> Virtual DOM에서 컴포넌트 변화를 감지해 낼 때, 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문.
꼭 div요소를 사용할 필요 X. div 대신 Fragment라는 기능을 사용할 수 있다.
import {Fragment} from 'react';
function App() {
return (
<Fragment>
<h1>리액트 안녕</h1>
<h2>잘 작동하니?</h2>
</Fragment>
);
}
export default App;import {Fragment} from 'react';
function App() {
return (
<>
<h1>리액트 안녕</h1>
<h2>잘 작동하니?</h2>
</>
);
}
export default App;
2. 자바스크립트 표현
자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 {}로 감싸주면 된다.
//src/App.js
import {Fragment} from 'react';
function App() {
const name = '리액트';
return (
<>
<h1>{name} 안녕</h1>
<h2>잘 작동하니?</h2>
</>
);
}
export default App;
3. If문 대신 삼항 연산자
JSX 내부의 자바스크립트 표현식에서 if문은 사용할 수 X
but, 조건에 따라 다른 내용을 렌더링해야 할 때 : JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, { }안에 삼항 연산자 사용
//src/App.js
import {Fragment} from 'react';
function App() {
const name = '리액트';
return (
<>
{ name === '리액트'? (
<h1>리액트 입니다.</h1>
) : (
<h2>리액트가 아닙니다.</h2>
)}
</>
);
}
export default App;위의 코드에서는 '리액트 입니다.'라는 문구가 나타날 것이고, name = '뤼액트';로 바꾸면 ? '리액트가 아닙니다.'로 바뀔 것이다.
4. AND 연산자(&&)를 사용한 조건부 렌더링
특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아예 아무것도 렌더링하지 않아야 하는 상황에 사용
//src/App.js
import {Fragment} from 'react';
function App() {
const name = '뤼액트';
return (
<>
{ name === '리액트' && <h1>리액트 입니다.</h1> }
</>
);
}
export default App;&&연산자로 조건부 렌더링을 할 수 있는 이유 : 리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문. 단, falsy한 값인 0은 예외적으로 화면에 나타난다.
5. undefined를 렌더링하지 않기
컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 X.
어떤 값이 undefined일 수도 있다면, OR(||) 연산자를 사용하면 해당값이 undefined일 때 사용할 값을 지정할 수 있음
//src/App.js
function App() {
const name = 'undefined';
return name || '값이 undefined입니다.';
}
export default App;아니면, JSX 내부에서 undefined를 렌더링하는 것도 OK
//src/App.js
function App() {
const name = 'undefined';
return <div>{ name }</div>
}
export default App;
6. 인라인 스타일링
리액트에서 DOM요소에 스타일을 적용할 때 : 객체 형태로 넣어주어야함.
Ex) background-color -> backgroundColor (카멜표기법으로 작성해야함)
//src/App.js
function App() {
const name = '리액트';
const style = {
backgroundColor : 'black',
color : 'aqua',
fontSize : '48px',
fontWeight : 'bold',
padding : 16
};
return (
<div style={style}>{ name }</div>
);
}
export default App;
7. class 대신 className
일반 HTML에서 CSS클래스를 사용할 때 : class라는 속성을 설정 -> JSX에서는 className으로 설정해 주어야 함
//src/App.css
.react {
background-color : aqua;
color : black;
font-size : 48px;
font-weight : bold;
padding : 16;
}//src/App.js
import './App.css';
function App() {
const name = '리액트';
return (
<div className="react">{ name }</div>
);
}
export default App;
8. 꼭 닫아야하는 태그
HTML 코드 중 input 요소는 <input></input>이라 입력하지 않고, <input> 이라고만 입력해도 작동
JSX에서는 태그를 닫아주어야 함. -> <input></input> 이라고 작성하거나, <input/>이라고 작성할 수도 있음.
이렇한 태그를 self-closing 태그라고 부른다.
9. 주석
//src/App.js
import './App.css';
function App() {
const name = '리액트';
return (
<>
{/* 주석은 이렇게 작성합니다. */}
<div
className="react" //시작태그를 여러 줄로 작성하게 되면 여기도 가능!
> { name }</div>
<input />
</>
);
}
export default App;
이 글은 김민준 님의 리액트를 다루는 기술을 읽고 정리한 내용입니다.
