리액트란 무엇인가 1
-
자바스크립트 라이브러리의 하나
-
기존 html은 태그형식의 문자열 반환이었다면 리액트는 컴포넌트 구조를 사용함
-
리액트는 왜 사용하는가?
- 동작원리 : 초기 랜더링, 가상 DOM 변경, 재조정, 실제 DOM 업데이트
- 특정 컴포넌트가 랜더링되면 HTML로 변경되고 하나의 DOM구조가 구성되고 화면(브라우저)에 표출
- DOM : HTML 기반으로 문서를 만드는 구조 기반
- 가상 DOM : 실제 DOM과 같은 크기의 DOM을 만들어 랜더링 실행, 실제 DOM에 랜더링을 실시간 실행하면 깜빡임이 엄청 심함
리액트란 무엇인가 2
-
새로운 리액트 앱 만들기에서 추천 툴체인을 이용해서 새로운 프로젝트를 만들어 보자
-
먼저 리액트 세팅을 해보자, VSC에서 아래 코드를 실행하면 리액트가 세팅이 된다.
npx create-react-app my-app
cd my-app
npm start
프로젝트 생성 및 코드분석
- 먼저 새로운 프로젝트를 다시 만들어보자
npx create-react-app todolist --template typescript // 타입스크립트 템플릿을 사용
cd todo list
npm start-
리액트 코드를 뜯어보자(페이지 소스보기)
-
개발자 도구 요소에서 코드를 보면 루트 하위에 있는 코드까지 볼 수 있다
-
index.tsx를 보면 root라는 객체를 통해 랜더링하는 것을 알 수 있음
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// React와 ReactDOM을 불러옵니다. React는 리액트 컴포넌트를 작성하는데 필요하고,
// ReactDOM은 React 컴포넌트를 실제 DOM에 렌더링할 때 사용하는 라이브러리입니다.
// index.css 파일을 가져옵니다. 이 파일에 스타일(디자인) 관련 코드가 있어,
// 전반적인 페이지의 스타일이 설정됩니다.
// App 컴포넌트를 가져옵니다. App은 전체 앱의 '시작점'이 되는 컴포넌트로,
// 다른 컴포넌트들을 내부에서 관리합니다.
// reportWebVitals를 가져옵니다. 성능을 측정하거나 모니터링하는 데 사용되는 함수입니다.
// 'root'라는 객체를 만듭니다.
// 'document.getElementById('root')'를 사용해 HTML의 root라는 id를 가진 요소를 찾습니다.
// 이 요소는 public/index.html 파일에서 찾을 수 있으며, React가 그 위에 렌더링됩니다.
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
// root 객체의 render 함수를 호출하여, 실제로 App 컴포넌트를 화면에 렌더링합니다.
// <React.StrictMode>는 리액트의 '엄격 모드'로, 개발 중 오류나 잘못된 코드 사용을 경고해줍니다.
// 앱을 안정적이고 깨끗하게 유지하는 데 도움이 되지만, 필수는 아닙니다.
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// 앱의 성능을 측정하려면 reportWebVitals 함수를 사용합니다.
// 기본적으로 console.log에 결과를 기록할 수 있도록 설정할 수 있습니다.
// 이 코드는 선택사항이며, 성능 모니터링을 원할 때 사용됩니다.
reportWebVitals();jsx문법 1
- jsx문법이란? : JS의 확장문법으로 HTML 태그처럼 작성되지만, JavaScript 안에서 사용되는 코드 예를 들어,
<h1>Hello World</h1>를 작성하면 이 부분이 리액트 컴포넌트 안에서 HTML처럼 동작함
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App1() {
return (
<div className="App">
<h1>핼로우 리액트</h1>
<p>반갑습니다</p>
</div>
);
}
function App2() { {/*위 내용과 아래 내용은 같은 것, JSX문법으로 표현하면 이렇게 나옴*/}
return (
React.createElement("div", null, "핼로우 리액트",
React.createElement("p", null, "반갑습니다"))
);
}
export default App; // app- 주의점 : 컴포넌트 내에 내용을 입력할 때 내용들을 꼭 부모 요소로 감싸줘야 함
function App() {
return (
<div className="App-header">
<h1 className="test">핼로우 리액트</h1>
<p>반갑습니다</p>
</div>
<div></div> // 이렇게 태그요소를 상위에 겹치게 둘 수 없음
);
}
export default App;- 때문에 아래 코드처럼 부모 요소를 꼭 두어야 함, 이때 부모요소를
<>...</>와 같은 빈 태그로 두어도 됨
function App() {
return (
<div>
<div className="App-header">
<h1 className="test">핼로우 리액트</h1>
<p>반갑습니다</p>
</div>
<div></div>
</div>
);
} - className으로 CSS를 불러와서 사용하면 요소를 디자인할 수 있음
function App() {
return (
<div className="App-header"> {/*className은 css속성*/}
<h1 className="test">핼로우 리액트</h1>
<p>반갑습니다</p>
</div>
);
}
export default App;- 아래 CSS를 불러와서 사용
.App-header{
color : blue;
font-size: 40px;
padding: 40px;
}
.test{
color : blue;
font-size: 40px;
padding: 40px;
}jsx 문법 2
- React에서는 JS코드를 작성할 수 있음
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
let name = "리액트";
return (
<div className="App-header">
<h1 className="test">핼로우{name}</h1> {/*이곳은 리액트 영역이므로 중괄호로 감싸줘야 인지를 함, 이는 변순 뿐 아니라 JS관련 수식 모두 공통적임*/}
<h2>
{
name === "리액트" ? (<h1>YES</h1>): (<h1>NO</h1>) // 조건부 연산자를 사용할 때도 JSX에서 삼항 연산자를 사용할 수 있음, if문을 사용할 수 없기 때문에 삼항 연산자 사용
}
</h2>
<p>반갑습니다</p>
</div>
);
}
export default App;- JSX에서 포트를 설정하지 않는 등 실수로 undefined값이 나타나는 경우
||로 예외처리를 해줄 수 있음
function App() {
const port = undefined;
return <>
{
port || "포트를 설정하지 않았습니다" // ||는 OR 연산자, 왼쪽 값이 false 같은 Falsy 값(undefined, null, 0, "" 등)이면 오른쪽 값을 반환
}
</>
}
export default App;jsx 문법 3
- 인라인 스타일링을 써보자
- 인라인 스타일링이란? : 컴포넌트 안에서 직접 스타일을 지정해서 내부에서만 사용하도록 해주는 것
- 모든 컴포넌트를 공유할 때 불편하다면 인라인 스타일링을 이용함
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
let name = "리액트";
const style = { // 이렇게 컴포넌트 안에서 사용하는 스타일링을 인라인 스타일링이라고 함
backgroundColor : 'black', // CSS에서는 -하이픈을 사용하지만 인라인에서 두 단어를 합쳐서 쓸 때는 대문자를 사용
color : "white",
fontSize : "40px",
fontWeight : "bold",
padding : "20px"
};
return (
<div style={ // 직접 인라인 스타일링을 적을 수도 있음
{
backgroundColor : 'black',
color : "white"
}
}>
<h1 style={style}>핼로우{name}</h1>
<h2>
{
name === "리액트" ? (<h1>YES</h1>): (<h1>NO</h1>)
}
</h2>
<p>반갑습니다</p>
</div>
);
}
export default App;- 클로징 태그를 사용하면 불필요한 태그를 모두 쓸 필요 없음
function App() {
let name = "리액트";
return (
<div className="App-header">
<h1 className="test">핼로우{name}</h1>
<h2>
{
name === "리액트" ? (<h1>YES</h1>): (<h1>NO</h1>)
}
</h2>
<p>반갑습니다</p>
<br/> {/*br 테그 같이 쌍으로 테그를 하지 않아도 되는 경우엔 클로징 테그를 사용해도 됨*/}
</div>
);
}
export default App;
김개발의 개발여정