컴포넌트란 ?
JSX 형식으로 구성된 HTML 요소들을 함수 또는 클래스 형태로 그룹핑하여
효율적인 랜더링 수행을 위한 리액트의 요소.
최근에는 함수형태로 컴포넌트를 만들고 클래스의 형태는 지양한다.
컴포넌트는 대문자로 시작하는것이 명시적 규칙.
소문자로 시작할 경우 컴파일 에러가 발생됨.( 일반적 함수 호출 형태는 문제 되지 않음.)
사용시 구분자 "/" 가 와야함.
- 사용형식
<Component / > 또는
<Component>
<ChidComponent>
</Component>
사용시 함수 형태로도 가능함.
Component()
모듈내 컴포넌트가 하나인 경우 모듈명과 파일명을 동일하게 처리하는것을 권장한다.
1파일 1컴포넌트가 일반적이기 때문에 명시적이며 직관적으로 파일명과 컴포넌트 명을 통일하자.
return 의 형태들은 1 덩이를 반환한다면 ,
중괄호와 return 이 생략 가능
return <><h1>테스트 리액트2</h1><h1>테스트 리액트3</h1></>;
return 후 바로 프래그 먼트로 시작한 경우 줄을 바꿔도 프리코딩 방식으로 인식. 소괄호 불필요.
return <>
<h1>테스트 리액트2</h1>
<h1>테스트 리액트3</h1>
</>;
하지만 1덩이 이상이 내부적으로 존재한다면,
return 이 있어야 함.
function Title() {
let name = 'to do list';
return (
<h1>{name}</h1>
);
}
import 수입 !
export 수출 !
import 대체해 사용할 함수명 (통용적으로 같은 이름 사용할것.) from './상대경로 위치'
export default function 함수명(){}
import IngredientsList from './IngredientsList';
default 를 사용한 경우 모듈의 객체 참조명에 대한 {} 중괄호 블럭 생략 가능.
default 를 사용함으로써 "해당 모듈엔 개체가 하나만 있다"는 사실을 명확히 나타낼 수 있다.
익명 함수 형태의 객체로 내보내기가 가능하다. 하나의 모듈에서 오직 하나만 사용가능하나, default 가 아닌 일반 컴포넌트도 해당 모듈에 포함하여export 하는것은 문제가 되지 않는다.
import {대체해 사용할 함수객체 참조, 함수객체 참조} from './상대경로 위치'
export function 함수명(){}
import { pi, square, Person } from './m02_bar.mjs';
import { pi as PI, square as mySqure, Person as P } from './m02_bar.mjs';
default 가 아닌경우는 중괄호로 묶어 객체형식으로 보내, 구조분해 할당받아 사용하겠다는 뜻.
export 클래스 명 또는 함수명이 import 시 객체 참조명과 동일해야함의 주의.
export { TestReact, TestReact2 };
export default App;
export 구문은 별도로 선언 가능하며 ,
선언 위치는 상관이 없지만 , 가독성을 위해 하단에 작성하자.
사용할 이름을 바꿀래.
as
import 실제컴포넌트명 as 변경 컴포넌트명
변경 컴포넌트명 또한 반드시 대문자로 시작해야함에 주의할 것.
default 컴포넌트에 대해서는 as가 적용 불가하다
import {data as recipes} from './recipeData';
import * as 변경컴포넌트명 from '위치';
*를 통해 위치에 있는 컴포넌트들을 객체 형식으로 접근이 가능함.
사용 또한 객체로 접근해야함.
import * as myLib from './m02_bar.mjs';
console.log(`** foo import 2 pi=${myLib.pi}`);
as를 쓰는 이유
- 이름의 충돌 방지
다른파일과 컴포넌트 이름이 충돌할 경우 as 를 이용하여 이름을 변경할 수 있다.
import { data as recipes } from './recipeData';
import { data as userData } from './userData';
- 가독성 향상
가져온 컴포넌트 명이 구체적이지 않다면 , 의미있는 이름으로 변경하여 코드의 가독성을 높일 수 있다.
'Developer > React' 카테고리의 다른 글
React , 예제로 살펴보는 useState와 이벤트 처리 (2) | 2024.06.11 |
---|---|
React, 이벤트 처리와 hook/ useState/useState를 활용한 객체 관리 (2) | 2024.06.11 |
React , 변수의 종류 와 JSX 의 조건문 처리. (0) | 2024.06.11 |
React, 하위로 정보를 전달하자 , props / 컴포넌트의 종속관계 (0) | 2024.06.10 |
React , React의 시작, npm start ! (0) | 2024.06.10 |