2024. 7. 3. 12:49ㆍReact
JS파일과 JAVA 파일을 외부에서 사용할 때는 무조건 대문자로 시작
* r01_ClassComponent로 작성하면 외부에서 사용 불가
R01_ClassComponent로 작성하면 외부에서 사용 가능
기본html에서는 css를 적용할 때 class라는 이름을 사용하지만 React에서 작성한 html에는 css를 적용할 때 className이라는 이름을 사용
css나 다른 js 파일을 가져올 때는 import를 사용
css를 가져올 때
-> import 'css경로와 css파일명'
js를 가져올 때
-> import [여기서 사용할 이름] from 'javascript파일경료/javascript파일명'
리액트는 알아서 새로고침을 주기적으로 자주 진행해줌 -> 덕분에 실시간으로 적용되는게 보임
주석 :
/ * * / -> 설명이나 추가 내용을 작성할 때 사용
{/ * * /} -> 코드를 주석 처리할 때 사용
**export를 함수 선언과 동시에 쓰기
const로 컴포넌트 시작하는 경우
export const 컴포넌트명 = () => {}
function으로 컴포넌트 시작하는 경우
export default function 컴포넌트명(){}
App.js
import './App.css';
/*css를 얻어와 아래 작성된 태그 옆에 className으로 적용*/
import R01 from './R01_ClassComponent.js';
import R02 from './R02_FunctionComponent.js';
import Props1 from './R03_Props.js';
import Props2 from './R04_Props2.js';
import Props3 from './R05_Props3.js'
function App() {
return (
<div className="App-header">
<R01></R01>
<p>--------------------------------------------------</p>
<R02></R02>
<p>--------------------------------------------------</p>
<Props1 num='1' name='홍길동' age='20' score='90'/>
<Props1 num='2' name='홍길은' age='30' score='80'/>
<Props1 num='3' name='홍길금' age='40' score='70'/>
<p>--------------------------------------------------</p>
<Props2 name='강감찬' age='72' gender='남자'/>
{/*
Props2 객체는 아래의 코드를 한 줄로 작성하기 위해 가져온 이름
<div className="info">
<h3>Props 예제2번</h3>
이름 : 강감찬 / 나이 : 72 / 성별 : 남자
</div> */}
<p>--------------------------------------------------</p>
<Props3 num='5' name='김연정' age='40' gender='여자' phone='010-1111-2222'/>
</div>
);
}
export default App;
-------------------------------------------------------------------------------------------------------------------------------------------------------------
R01_ClassComponent.js
import React, { Component } from "react";
//old version
class 컴포넌트 extends Component{
//class 컴포넌트 extends -> 예전 방식
render(){
console.log("javascript를 작성하는 공간");
return(
<>
<pre>
리액트에서는 return으로 시작한 다음
코드를 처음부터 끝까지 감싸줄 태그가 필요함
이때 코드를 감싸주기 위해 주로 <div></div>나 <></>를 사용
** <div></div>와 <></> 차이점
div : html 표준 태그. 주로 레이아웃 스타일링을 위한 컨테이너로 사용
<></> : html 표준에 없는 사용자 정의 태그. 특정 기능이나 화면을 감싸는 데 사용
</pre>
<h2>클래스형 컴포넌트</h2>
</>
);
}
}
export default 컴포넌트;
//컴포넌트라는 코드를 외부로 내보내겠다는 의미
//다른 javascript에서 내보내고자 하는 코드를 import해서 사용 가능
//만든 class에 export default를 지정해야만 외부에서 사용 가능
**
import React, { Component } from "react";
-> node_modules 폴더에서 react라는 폴더에 있는 파일을 가져와서 R01_ClassComponent.js 페이지에서 사용하겠다는 뜻
react 폴더를 가져와서 사용하는데 사용할 이름을 React로 지정
**
node_modules : Node.js에서 프로젝트가 사용할 패키지나 라이브러리가 저장된 폴더
**
render(){
console.log("javascript를 작성하는 공간");
};
render : return되는 html형식의 코드(jsx, js + xml)를 화면에 출력하는 함수
- 화면이 변경되어야 할 시점에 자동으로 호출됨
- Component를 상속받는 하위 클래스에 반드시 있어야하는 함수
리액트에서는 return으로 시작한 다음 코드를 처음부터 끝까지 감싸줄 태그가 필요함
이때 코드를 감싸주기 위해 주로 <div></div>나 <></>를 사용
** <div></div>와 <></> 차이점
div : html 표준 태그. 주로 레이아웃 스타일링을 위한 컨테이너로 사용
<></> : html 표준에 없는 사용자 정의 태그. 특정 기능이나 화면을 감싸는 데 사용
----------------------------------------------------------------------------------------------------------------------------------------------------------------
R02_FunctionComponent.js
const 함수예제 = () =>{
return(
//리액트 컴포넌트에 class를 추가할 경우 className으로 작성
<>
<h2 className="red">함수형 컴포넌트 입니다.</h2>
<p>
클래스 컴포넌트와 사용방식은 비슷하나, 기본 틀이 다름.
부가적으로 작성해야하는 코드가 상대적으로 적음.
const나 function으로 시작하는 코드에는 render()를 작성하지 않음
</p>
</>
)
}
export default 함수예제;
함수형 컴포넌트
1. 함수 생성하기
2. return 구문에 출력하고자 하는 html 코드 작성
3. 만든 함수에 export default 지정
클래스 컴포넌트와 사용방식은 비슷하나, 기본 틀이 다름.
부가적으로 작성해야하는 코드가 상대적으로 적음.
const나 function으로 시작하는 코드에는 render()를 작성하지 않음
--------- --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- ---------
R03_Props.js
props 예제1 (함수형 컴포넌트)
const 부모1번 = (props) =>{
//부모 컴포넌트로 전달받은 데이터 확인
console.log("부모1번 : " , props);
return(
<>
<h3>Props 예제 1번 확인하기</h3>
{/* js값이나 코드를 html 내부에 사용할 땐 {}안에 작성 */}
<ul>
<li>번호 : {props.num}</li>
<li>이름 : {props.name}</li>
<li>나이 : {props.age} 세</li>
<li>점수 : {props.score} 점</li>
</ul>
</>
)
}
export default 부모1번
props : 부모 컴포넌트(태그)로부터 전달받은 값을 담은 객체. -> 즉 변수명. 아무거나 써도 됨.
R04_Props2.js
const 부모2번 = (props) =>{
const {name, age, gender} = props;
return(
<div className="info">
<h3>Props 예제2번</h3>
이름 : {name} / 나이 : {age} / 성별 : {gender}
</div>
)
}
export default 부모2번;
props : 부모 컴포넌트(태그)로부터 전달받은 값을 담은 객체. -> 즉 변수명. 아무거나 써도 됨.
대신 아래 const {} = 변수명과 일치해야함
* const {name, age, gender} = props;
js변수선언/초기화 방법 중 하나.
오른쪽에 있는 (props) 객체의 key값이 왼쪽에 작성된 변수명과 일치한다면 자동으로 대입
------------------------------------------------------------------------------------------------------------------------------------------
App.js 실행 결과 화면 ↓
