지난시간에 간단한 어플리케이션 만들면서 리액트를 써보았는데 실제로 cnd 방식으로는 거의 개발을 하지 않고 npm 의 라이브러리를 불러와서 개발을 진행을 하게 됩니다 오늘은 npm 에서 제공하는 React 어플리케이션 만드는 방법을 보고 JSX 문법 연습 몇가지 더 진행을 해보겠습니다
Node Js 설치
https://nodejs.org/en/download 로 가셔서 자신에게 알맞는 버전으로 설치를 해주시면됩니다 이때 LTS 버전이 있고 Current 버전이 있는데 LTS 버전으로 받으시면됩니다
설치후에는 이렇게 CMD 를 켜서 node --version 을 입력해서 설치한 버전이 나오면 올바르게 설치가 된것입니다 만약 나오지 않는다면 Node JS 환경설정 으로 구글에 검색을 하시면됩니다
Npm
이는 Node package manager 로 프론트엔드 라이브러리 관리하는 중앙 저장소 입니다 java 로 치자면 mavenRepository 같은 곳입니다 인터넷 망이 되는 곳에서는 어디서든 node를 설치해서 필요한 의존성을 Npm 으로 받을 수 있습니다
create-react-app
설치가 끝났으면 특정 위치(폴더하나 만드시고 다음과 같이 입력하겠습니다) create-react-app react-review
그러면 이와 같은 화면이 나오면서 프로그레스바가 진행이 되는것을 볼 수 있는데 다 끝나고 나면 어떻게 실행을 하는지 보여주게 됩니다
cd react-review npm start
즉 디렉터리 상에서 들어가서 npm start 명령어를 쓰게 되면 실행이 된다는 뜻입니다 그럼 들어가보겠습니다
Vscode - npm start
저는 리액트를 개발할때 IDE 를 Vscode 를 사용하겠습니다 이 Vscode 는 MS 에서 만든 프론트엔드 개발 특화 IDE 로 여러가지 플러그인을 활용해서 개발을 진행을 할 수 있습니다 이곳에서 터미널 창을 열어서 실행을 하게 되면 주소에 http://localhost:3000 나타나는데 이 주소로 들어가게 되면
이렇게 React 애플리케이션이 개발이 된것입니다
JSX 문법 좀더 연습
https://react.dev/learn#writing-markup-with-jsx JSX 문법 연습은 해당 공식문서를 바탕으로 내용을 정리하겠습니다
React_JSX.js 파일 만들기
-src -React_JSX.js
파일을 만들어줍니다 우리는 모든 컴포넌트를 이 아래로 만들어서 JSX 문법 연습을 하도록 하겠습니다
DisPlaying data
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from "react";
const user = {
name : "time"
}
function LenderingJSX(){
return (
<h1>{user.name}</h1>
)
}
export default LenderingJSX
export default Display_my_name_on_h1_tag
이 소스를 보자 간단하게 상위 user 에 속해 있는 프러퍼티 중에서 name 을 꺼내서 하단 user.name 에 바인딩하고 있는 모습을 볼 수 있습니다 그리고 이를 실행을 하기 위해서
index.js 수정
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import LenderingJSX from './React_JSX';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<LenderingJSX/>
</React.StrictMode>
);
reportWebVitals();
이 부분이 메인화면의 실행부분입니다 우리는 root.render() 부분에서 우리가 만든 컴포넌트를 넣고 렌더링을 하게 되면
이렇게 됩니다
사진추가
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import React from "react";
const user = {
name : "time" ,
imageUrl : "https://i.namu.wiki/i/znHBb3Mj7oCKLfLkqTe8yluRlgLZ8RGeFNTY0Wb9shDMpwenepErpySoP7znikkqmVcDOjPv-vfwQEnha_PWdw.gif" ,
image_width_size : 800,
image_height_size : 300,
}
function LenderingJSX(){
let size = {
width:user.image_width_size,
height:user.image_height_size
}
return (
<div>
<h1>{user.name}</h1>
<img
className="avatar"
src={user.imageUrl}
style={size}
>
</img>
</div>
)
}
export default LenderingJSX
사진추가는 html 태그로 img 태그를 주면된다 이때 class 대신에 className 을 사용하게 되는데 React 에서는 특별하게 css 클래스를 나타낼때 className 을 사용해서 나타냅니다 그리고 style 같은 경우는 써서 안에 key-value 형태로 값을 넣어주면됩니다 그리고 여기중요한게 한가지가 있는데
Fragments(프래그먼트)
React 컴포넌트를 만들때 여러개의 html 태그를 만들어서 반환하는것은 매우 당연하고 자주 있는 일입니다 이떄 여래개의 html 태그를 반환할때는 반드시 상단에 div 태그를 선입자로 넣고 그 사이에 반환하고자 하는 html 태그를 생성합니다 지금같은 경우도 h1 태그와 img 태그를 동시에 반환을 할려고 할대 상위의 div 태그 안에 있지 않으면 오류가 발생합니다
렌더링 리스트
이번엔 리스트를 렌더링을 해보겠습니다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React from "react";
const downloadApplitionList = [
{ title: 'YouTube', id: 1 },
{ title: 'Instargram', id: 2 },
{ title: 'Gmail', id: 3 },
{ title: 'GitHub', id: 4 },
{ title: 'MS365', id: 5 },
];
function LenderingJSX(){
return (
<div>
<ul>
{downloadApplitionList.map(x => {
return <li key ={x.id}>{x.title}</li>
})}
</ul>
</div>
)
}
export default LenderingJSX
다음과 같은 리스트 downloadApplitionList 가 있을때 이를 React 로 렌더링 하기 위해서는 이와 같은 코드가 쓰이게 됩니다 특히나 map 는 자바 스크립트에서 새로운 배열을 만들때 사용하는 stream 객체로 현재 {downloadApplitionList.map(x => { return <li key ={x.id}>{x.title}</li>})} 따로 떼서 보면 이와 같은 형태로 보일것입니다
[ <li key=1>YouTube</li> , <li key=2>Instargram</li> , <li key=3>Gmail</li> , <li key=4>GitHub</li> , <li key=5>MS365</li>] 이렇게 배열이 쌓이게 되고 이를 바로 return 을 시켜서 화면과 같은 list 형태를 렌더링 하게 됩니다
이렇게 나오게 됩니다
id 마다 다른 색깔을 줄려고 할때
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function LenderingJSX(){
let bg-grey = {
color : "grey"
}
let bg-magenta = {
color : "magenta"
}
return (
<div>
<ul>
{downloadApplitionList.map(x => {
if(x.id % 2 == 0){ // 짝수
return <li key ={x.id} style={bg-grey}>{x.title}</li>
}else{ // 홀수
return <li key ={x.id} style={bg-magenta}>{x.title}</li>
}
})}
</ul>
</div>
)
}
이것은 의외로 간단하다 stream 안에서 x값을 가져와서 if 분기문으로 색깔을 지정할 수 있게 return 하면된다 그러면 이때는
이와 같이 웹화면에 색깔이 표기된 상태로 나오게 된다
클릭이벤트
앞으로 여러 이벤트를 배우겠지만 간다하게 버튼넣고 alert 출력하는 이벤트를 마지막으로 보자
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function LenderingJSX(){
return (
<button onClick={
() => {
alert('버튼을 클릭했습니다')
}
}>
클릭해보세요
</button>
)
}
export default LenderingJSX
버튼클릭은 앞에서 진행을 해보았다 이때는 이와같이 작성을 하면된다 이때 onClick 에 익명함수로 한번 감싼이유는 아래의 예제로 볼수 있다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const buttonData = [0 , 1, 2, 3, 4, 5]
function alertFunction(value){
alert(value)
}
function LenderingJSX(){
return (
<div>
{
buttonData.map(x=>{
return <button onClick={() => alertFunction(x)}> Click me {x} </button>
})
}
</div>
)
}
만약 위와 같은 함수 alertFunction 은 들어오는 값을 alert 로 띄우는 역활을 하는데 이떄 이를 클릭이벤트에서 쓸려고 하면 반드시 익명을 함수호 한번더 감싼뒤에 호출을 해야 합니다 ` buttonData.map(x=>{return <button onClick={alertFunction(x)}> Click me {x} </button>})` 이렇게 안되는 이유는 이는 함수를 즉시 실행을 해서 return 값을 받는 것입니다
만약 위같은 방식으로 함수를 호출하려면 고차함수의 특징 함수를 return을 하면됩니다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function clickEvent(value){
return function (){
alert(value)
}
}
function LenderingJSX(){
return (
<div>
{
buttonData.map(x=>{
return <button onClick={clickEvent(x)}> Click me {x} </button>
})
}
</div>
)
}
이와 같이 말이죠 이렇게 하면 클릭이벤트 안에 익명함수를 한번더 return 하게 됨으로 위와 같은 결과가 나오게 됩니다 당연히 클로저의 이유로 value 는 값을 이어 받는 것입니다 즉 같은 함수를 어떻게 쓰고 있느냐의 차이일 뿐입니다