컴포넌트 생성
<스니펫 단축키>
rsf: 함수선언문 컴포넌트
rsc: 함수표현식 컴포넌트
컴포넌트명의 첫 글자는 반드시 대문자로 작성해야 컴포넌트로 인식한다.
<기본 구조>
// 함수표현식 컴포넌트
const 컴포넌트명 = () => {
return (
<> // fragment
/*
여기 작성되는 내용은 JSX로 화면에 보이는 영역
개발을 쉽게 하기 위해 태그 형식으로 사용하나 html과 달리 태그가 아님
*/
</>
)
}
export default 컴포넌트명;
// ---------------------------------------------------
//함수선언문 컴포넌트
function 컴포넌트명(props) {
return (
<div>
</div>
);
}
export default 컴포넌트명;
import 파일 연결
컴포넌트 포함 .js, .jsx, .css, .png, .svg, ... 등의 파일을 연결할 때 import를 사용하며
컴포넌트를 부모 컴포넌트에 연결할 때는 JSX 작성과 import 연결을 둘 다 작성해야 한다.
import "./assets/css/reset.css";
import Ex1_props from "./component/Ex1_props";
function App() {
return (
<>
<Ex1_props />
</>
);
}
export default App;
JSX 영역
컴포넌트 내부에 JSX 방식으로 작성된 코드들이 화면에 보이는 영역.개발을 쉽게 하기 위해 HTML과 비슷한 태그 형식으로 작성하나 태그와는 다르다.
function Ex1_props(props) {
return (
<div>
<h1>JSX영역</h1>
<h2>
컴포넌트 내부에 JSX 방식으로 작성된 코드들이 화면에 보이는 영역.
개발을 쉽게 하기 위해 HTML과 비슷한 태그형식으로 작성하나 태그와는 다르다.
</h2>
</div>
);
}
export default Ex1_props;
props
컴포넌트의 정보를 담은 속성으로 부모 -> 자식에게 데이터가 흐르며 컴포넌트의 매개변수에 객체 형태로 전달된다.
function Coffee(props) { // props에 객체형태로 {name="아메리카노" price="4000원"} 전달.
return (
<div>
<h2>{props.name} : {props.price}</h2> // 점 표기법으로 호출 후 h2에 출력
</div>
);
}
function Ex1_props(props) {
return (
<div style={{border: "1px solid #000", width: "70vw"}}>
<h1>props</h1>
<Coffee name="아메리카노" price="4000원"/>
</div>
);
}
export default Ex1_props;
매개변수로 전달되는 객체는 구조 분해 할당을 통해 사용할 수 있으며 실제로 보편적으로 사용되는 방식.
function Coffee1(coffee) {
const {name, price} = coffee
return (
<div>
<h2>{name} : {price}</h2>
</div>
);
}
function Coffee2({name, price}) {
return (
<div>
<h2>{name} : {price}</h2>
</div>
);
}
function Ex1_props(props) {
return (
<div style={{border: "1px solid #000", width: "70vw"}}>
<h1>props</h1>
<Coffee1 name="바닐라라떼" price="4500원"/>
<Coffee2 name="카페라떼" price="5000원"/>
</div>
);
}
export default Ex1_props;
props 속성을 인용부호로 감싸면 문자열로 전달되는데
중괄호로 감싸 자바스크립트로 작성할 수도 있다. 이 경우 해당 데이터형을 그대로 전달한다.
import Ex2Sub from "./Ex2Sub";
function Ex2() {
const latte = {name:"카페라떼", price: "4500"}
const mocha = {name:"카페모카", price: "5000"}
const {name, price} = mocha
return (
<div>
<h1>props</h1>
{/* Ex2Sub 컴포넌트에 속성(props) 전달 */}
<Ex2Sub name="아메리카노" price="4000"/>
<Ex2Sub name="아메리카노" price={4000}/>
<Ex2Sub name={latte.name} price={latte.price}/>
<Ex2Sub name={name} price={price}/>
<Ex2Sub {...latte} />
<Ex2Sub {...mocha} />
</div>
);
}
export default Ex2;
export default Ex2;
// ----------------------- 자식 컴포넌트
function Ex2Sub({ name, price }) {
return (
<>
<h2>Ex2 자식 컴포넌트</h2>
<p>
커피: {name} / ({typeof name})
</p>
<p>
가격: {price} / ({typeof price})
</p>
</>
);
}
export default Ex2Sub;
props는 부모 요소에서 값을 전달받아 사용하지만, 자식 컴포넌트의 기본 props 값을 정해줄 수도 있다.
자식컴포넌트.defaultProps = { props키 : 초기값}
// 초기값 설정. 선택 사항
Try1Sub.defaultProps = {
name: "기본값",
email: "기본값",
tel: "기본값",
color: "기본값",
bgcolor: "기본값",
done: true,
};
'React' 카테고리의 다른 글
[React] react 이미지 경로 (0) | 2023.01.03 |
---|---|
[React] state 상태 (0) | 2022.12.30 |
[React] React에서의 map 특징 (0) | 2022.12.30 |
[React] React 이벤트 (0) | 2022.12.30 |
[React] JSX 규칙 (0) | 2022.12.29 |