[React] 기본 컴포넌트 배치
환경 : Visual Studio Code
리액트를 사용하여 기본 컴포넌트 배치를 해보자
위와 같은 구조로 위치를 설정해보자
components 폴더 안에 Ex01.js / Ex02.js 파일을 만든다
- Ex01.js
//import
//function
function Ex01(){
return (
<>
<h2>1번화면</h2>
</>
);
}
//export
export default Ex01;
- Ex02.js
//import
//function
function Ex02(){
return(
<>
<h2>2번화면</h2>
</>
);
}
//export
export default Ex02;
- App.js
//JS파일의 최상단에는 import 키워드가 들어온다
// - 이미지, CSS, 다른 JS 파일 등을 불러올 수 있다
// - ES6 Module 시스템, RequireJS 등을 사용
import logo from './logo.svg';
import './App.css';
import Ex01 from './components/Ex01';
import Ex02 from './components/Ex02';
//모든 컴포넌트(JS) 파일에는 함수가 하나 존재한다
// - 함수가 하나의 화면 조각을 의미한다
// - 함수의 이름이 화면의 이름이다
function App() {
//화면에 필요한 데이터들을 선언하고 계산하는 코드 배치
//return 뒤에는 반드시 화면에 대한 코드가 있어야 한다(JSX)
//JSX는 JSP처럼 HTML을 만들어내는 도구 역할을 수행(순수 HTML이 아님)
//(중요) 반환되는 화면은 반드시 한 개의 태그로 감싸져야 한다
// - class 대신 className을 사용해야 한다
// - 속성에 ""를 쓰면 정적, {}를 쓰면 동적 데이터를 설정해야 한다
// - 모든 태그는 종료 태그가 있어야 한다(input, img도 마찬가지)
return (
<>
<h1>리액트 컴포넌트 만들기</h1>
<Ex01></Ex01>
<hr></hr>
<Ex02></Ex02>
</>
);
}
//외부에서 이 파일을 이용할 수 있도록 내보내기 설정
//- 함수 이름(화면 이름)을 내보내기 하여 사용할 수 있도록 처리
export default App;(+) 위에서 만든 js파일을 태그 형식으로 삽입하면 된다
(+) 각각의 js를 구분하기 위해 구분선<hr> 태그를 넣어줬다
- 출력결과
카운트가 +/- 되는 기능을 구현해보자
(Ex02.js 만 바꾸면 된다)
- Ex02.js
//import
//react 라이브러리 중에서 useState라는 기능을 쓰겠다
//Naming import(전체 다 안 쓰고 골라서 사용)
import {useState} from 'react';
//function
function Ex02(){
//화면에서 변화하는 값을 state로 선언
//- const는 불변 값을 생성할 때 사용
//- React는 데이터 변화에 따라 화면을 자동 갱신
//- 자동갱신 구조 구현을 위해 반드시 const 필요
//- 만들 때 변수명, setter 메소드명을 순차적으로 작성
//- 사용할 때는 변수를 쓰고, 변경할 때는 setter 메소드 사용
const [count, setCount] = useState(16);
// state를 화면에 출력할 수 있다
// - { 이름 } 형식으로 화면에 출력(표현식), EL과 유사
// - state가 변하면 해당 자리의 값이 자동으로 변함
// 이벤트를 설정할 수 있다
// - onClick과 같이 반드시 이벤트 첫글자가 대문자여야 함
// - onClick 안에는 함수를 배치하여야 한다
// - 람다 형식으로 사용(화살표 함수, Arrow function)
return(
<>
<h2>2번화면</h2>
<button onClick={e=>setCount(count-1)}>-</button>
<span>{count}</span>
<button onClick={e=>setCount(count+1)}>+</button>
</>
);
}
//export
export default Ex02;(+) 주석 참고!
(+) React는 데이터 변화에 따라 화면을 자동 갱신해주기 때문에, jquery에 비해 훨씬 간단한 코드로 원하는 결과를 만들어 낼 수 있다. react를 사용하기 위해서 화면에서 변하고자 하는 한 지점을 지정하여 그 부분만 바뀐다고 생각하고 코딩하는 것이 좋다.
(+) const : 불변 값 생성 시 사용, 자동 갱신 구조 구현을 위해 필요!!
- 만들 때 변수명, setter 메소드명을 순차적으로 작성
- 사용할 때는 변수를 쓰고, 변경할 때는 setter 메소드 사용
(+) state를 화면에 출력할 수 있음
- { 이름 } 형식으로 화면에 출력(표현식), EL과 유사
- state가 변하면 해당 자리의 값이 자동으로 변함
(+) 이벤트를 설정할 수 있다
- onClick과 같이 반드시 이벤트 첫글자가 대문자여야 함
- onClick 안에는 함수를 배치하여야 한다
- 람다 형식으로 사용(화살표 함수, Arrow function)
- 출력결과
이번엔 이미지 크기를 변경하도록 해보자
(새로 Ex03.js 파일을 만들어서 실행)
- Ex03.js
//import
import { useState } from "react";
//function
function Ex03(){
const [size, setSize] = useState(300);
return (
<>
<h2>3번화면</h2>
<button onClick={e=>setSize(150)}>작게</button>
<button onClick={e=>setSize(300)}>보통</button>
<button onClick={e=>setSize(450)}>크게</button>
<br></br>
<img class="dummy"
src="https://picsum.photos/id/1001/500/500"
width={size} height={size}></img>
</>
);
}
//export
export default Ex03;(+) Ex02.js와 유사한 방식이다
(+) state를 width/height에 넣어주어 바뀌도록 하였다
- 출력결과
개인 공부 기록용입니다:)