우리는 많은 유형을 홈페이지 헤더를 만듭니다. const Header = () => { return ( ) } 헤더에는 Logo, MenuItem, UserProfile 등 요소를 포함해서 개발합니다. 이때, 헤더에서 로그인 기능을 제공한다고 생각해보면 UserProfile 부분은 SignIn과 UserProfile로 나뉘어서 제공됩니다. const Header = (props: { showSignup: boolean }) => { return ( {!props.showSignup && } {!props.showSignup && } {props.showSignup && } ) } 다음과 같이 보여집니다. 아직까진 훌륭한 헤더이다. 필터링된 헤더 현재 헤더에서 보여주고 있는 기능이 너무 많아서 특정 화면에..

React 하면 많은 것이 떠오르겠지만 컴포넌트, 재사용성 등의 키워드가 가장 먼저 떠오른다. 리액트에서는 props를 통해서 컴포넌트에 새로운 엘리먼트나 컴포넌트를 추가하는 것이 가능하다. 이것을 컴포넌트 합성이라고 부른다. 그러면 내부의 디자인이 다른 UI에서도 쉽게 재사용할 수 있는 컴포넌트를 만들 수 있다. 다음과 같은 디자인이 있다고 생각해보자 노란색 박스 영역이 조금 형식이 다른데, 위에는 보라색 버튼과, 녹색 내용이 있으며, 아래는 버튼은 없고, 갈색 내용이 있다. 이것을 위해서 모든 내용을 매개변수로 받기에는 노란색 박스가 관리해야할 매개변수가 너무 많아진다. ( 위 레이아웃까지야 괜찮다고 하더라도 더 큰 형식이면?! ) 이걸 이제 React로 한번 만들어보자 interface Props ..

1. 컴포넌트? 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체이다. => 이것을 보여주는 것이 렌더링 말이 너무 어려운데, 한마디로 앱을 이루는 최소한의 단위이다. 2. 컴포넌트의 종류 컴포넌트의 종류는 함수형 컴포넌트와 클래스형 컴포넌트 2가지가 있다. 1. 함수형 컴포넌트 function Componenet(props) { return Hello! World! } JavaScript 함수의 형태로 만들기 때문에 함수형 컴포넌트라고 불린다. 장점 클래스형 컴포넌트보다 선언하기 편하다 메모리 자원도 클래스형 컴포넌트보다 덜 사용한다. 결과물의 파일 크기가 더 작다.( 큰 차이까진 아니다) 단점 state와 라이프사이클 API의 사용이 불가능하다.(Hooks라는 기능이 도입되므로 대부분 해결..