엄격 모드
- 잠재적인 문제를 감지하고 경고를 발생시켜 개발자에게 알려주는 도구
- StrictMode 태그를 사용하면 엄격 모드가 활성화
- 2번씩 실행
console.log('apple')을 작성하면 개발자 도구 콘솔창에 apple이 2번 출력된다.
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const root = createRoot(document.getElementById('root'));
root.render(
<StrictMode>
<App />
</StrictMode>
);컴포넌트 속성 (props)
속성값을 전달받아 재사용 가능
컴포넌트에 속성 작성
import ReactDOM from 'react-dom/client';
import Profile from './Profile.jsx';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Profile name="song" job="홈 프로텍터" />);Profile 컴포넌트
import './practice.css';
const Profile = (props) => {
return (
<div role="group">
<p>이름: {props.name}</p>
<p>직업: {props.job}</p>
</div>
);
};
export default Profile;
일반 함수 vs 함수 컴포넌트
일반 함수
- 항상 JSX를 반환할 필요가 없다
- 항상 첫 번째 인수로 props를 전달 받지 않는다
함수 컴포넌트
- 항상 JSX를 반환한다.
- 항상 첫 번째 인수로 props를 전달 받는다.
아토믹 디자인 (Atomic Design)
- 원자
- 원자는 모든 스타일의 기본
- 폼 레이블, 인풋, 버튼 등과 같은 요소
- 분자
- 원자 규모보다 큰 경우 분자에 해당
- 원자 그룹
- 개별적으로 존재하는 원자가 결합되어 목적을 갖게 되면 하나의 작은 인터페이스가 형성
- 레이블 (입력 목적을 명시), 드롭다운 메뉴 (사용자로 하여금 입력 내용을 선택), 버튼을 클릭 (입력 사항을 저장)
이와 같이 구성된 컴포넌트는 어디에서든 재사용 가능합니다.
- 조직체
- 분자 또는 다른 조직체와 한데 묶여 구성된 비교적 복잡한 컴포넌트
- 인터페이스를 구성하는 개별 섹션을 형성
- 원자와 분자로 구성되며 보다 구체적인 목적을 수행
- 템플릿
- 원자, 분자 또는 유기체를 사용해 템플릿 또는 페이지를 만들 수 있음
- 컴포넌트를 레이아웃 하여 콘텐츠 구조의 기본이 되는 틀을 명확하게 표현
- 페이지
- 콘텐츠가 템플릿에 반영되어 만들어진 인스턴스(instance)
- 디자인 시스템 요소의 효율성을 테스트하는 데 중심
