학습내용
- Component
- JSX
- Props
- State
화면을 구성하는 하나의 단위(블록)로 함수로 이루어졌다. 첫글자는 반드시 대문자여야만 한다. 폴더명과 파일명에 모두 카멜케이스를 적용하나 폴더명은 소문자로, 파일명은 대문자로 시작한다.
function App (){ /* 자바스크립트 */ return <div> /* JSX */ </div> };
클래스형 컴포넌트 | 함수형 컴포넌트 | |
---|---|---|
출시 시기 | 초기 | 후기 |
방식 | 라이프사이클 | 리액트 훅 |
비고 | 사용을 권장하지 않지만 함수형 컴포넌트의 구조 이해와 클래스형 컴포넌트 프로젝트의 유지보수를 위해 학습 필요 | 일반적으로 사용하는 컴포넌트 |
한 컴포넌트 안에 다른 컴포넌트를 삽입하는 구조
function Child() { return <div>나는 자식입니다.</div>; } function App() { return <Child />; }
import React from 'react';
import logo from './logo.svg';
import './App.css';
<p sayHello={{color: 'orange', fontSize: '20px'}}>orange</p>
function App() {
const calculation = {
color: 'blue',
fontSize: '15px',
};
const number = 1;
return (
<div className="App">
<p style={sayHello}>안녕하세요! 리액트 반입니다 :)</p>
<p style={calculation}>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
</div>
);
}
export default App;
- 단일한 엘리먼트 반환
{중괄호}
로 자바스크립트 삽입- json 형식의 style
{sayHello}
처럼 함수밖에서 지정하거나,{calculation}
처럼 함수 안에서 제작하는 방법 둘 다 가능하다.
부모 컴포넌트로부터 받아온 데이터. 정확히는 부모 컴포넌트가 자식 컴포넌트에 넘겨주는 데이터이다. 단, 자식 컴포넌트에서 부모 컴포넌트로
props
를 전달하는 것은 불가능하다. 해당 개념을 이해하기 위해선 부모-자식관계의 컴포넌트 개념이 선행되어야 한다.function App() { return <Mother />; } function Mother() { const name = '신애필'; return <Child motherName={name} />; // props로 name을 전달 } function Child(props) { return <div>{props.motherName}</div>; //props로 name을 받아옴 }
특정 컴포넌트에
props
로 데이터를 전달하기 위해 해당 데이터가 필요없는 컴포넌트에까지 데이터를 전달하는 것으로 Threading이라고도 한다.
Parent
에서 ChildC
로 데이터를 전달하기 위해 ChildA
, ChildB
는 불필요한 데이터를 갖게 된다.
Props Drilling에서는 ChildA
에서 ChildB
로, 혹은 ChildB
에서 ChildC
로 전달될 때 프로퍼티에 변동이 생겨 ChildC
에서 문제가 발생한다면 해당 프로퍼티를 추적하기 어렵다. 컴포넌트가 깊어질수록 해당 리스크도 증가한다.
Redux 라이브러리를 사용하면 컴포넌트간에 props
를 전달하지 않고도 컴포넌트 간에 데이터를 공유할 수 있다.
런타임시 부모로부터 전달받은
Props
의 데이터 타입을 검사하는 툴. 자식 컴포넌트와 부모 컴포넌트의 데이터 타입이 불일치시 콘솔에 에러가 표시된다.
자식 컴포넌트에게 정보를 전달하는 또 다른
props
로 레이아웃 컴포넌트 생성시 유용하다.function User(props) { return <div>{props.children}</div>; } function App() { return <User>안녕하세요</User>; }
function Todo({ title, body, isDone, id }){
return <div>{title}</div>
}
구조분해할당을 사용하면 props.
를 사용하지 않고도 props
데이터를 사용할 수 있다.
임시로 지정한
props
값. 부모로부터props
를 전달받지 않은 상태에서 사용하며 부모에게서 전달받을 시, 부모로부터 받은props
로 변경된다.
방법①function Child({ name }){ return <div>내 이름은 {name} 입니다. </div> } Child.defaultProps={ name: '기본 이름' }
방법②
function Child({ name = '기본이름' }){ return <div>내 이름은 {name} 입니다. </div> }
컴포낸트 내부의 변동 가능성 있는 유동적인 값.
onClick
,onChange
이벤트 등과 함께 쓰인다.
const [ value, setValue ] = useState( 초기값 )
리액트 잘 진행되는거같으세요!? ㅎㅎ