: 리액트로 만들어진 앱을 이루는 최소한의 단위
기존의 웹 프레임워크는 MVC 방식으로 분리하여 관리하기 때문에 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다.
반면, 컴포넌트는 MVC 의 뷰를 독립적으로 구성하여 재사용을 할 수있고, 이를 통해 컴포넌트를 쉽게 만들 수 있다.
import React from 'react';
export default Hello;
: 내보내기를 한 경우 다른 컴포넌트에서 불러와서 사용가능
import React from "react"; function Hello(){ return <div>안녕하세요</div> } export default Hello;
: props : properties 의 줄임말
어떠한 값을 컴포넌트에게 전달해줘야할때, props를 사용한다<예시>
import React from 'react'; import Hello from './Hello'; function App() { return ( <Hello name="react" /> ); } export default App;
Hello 컴포넌트에서 App 컴포넌트에 있는 name값 사용
import React from 'react'; function Hello(props) { return <div>안녕하세요 {props.name}</div> } export default Hello;
컴포넌트에 전달되는 props는 파라미터를 통하여 조회 가능
ex) name 값을 조회하고 싶다면 props.name 로 조회
<예시2>
: App 컨포넌트에 color 값 설정 후 Hellow 컨포넌트에 props 전달import React from 'react'; import Hello from './Hello'; function App() { return ( <Hello name="react" color="red"/> ); } export default App;
:Hello 컴포넌트에서 color 조회, 폰트색상으로 설정
import React from 'react'; function Hello(props) { return <div style={{ color: props.color }}>안녕하세요 {props.name}</div> } export default Hello;
props 내부의 값을 조회할 때마다 props. 입력
-> 비구조화 할당 문법을 사용해서 코드 간결하게 작성
import React from 'react'; function Hello({ color, name }) { return <div style={{ color }}>안녕하세요 {name}</div> } export default Hello;
: 컴포넌트에 props를 지정하지 않았을 때 기본적으로 사용할 값을 설정하고 싶다면 컴포넌트에 defaultProps라는 값을 설정하면 된다.
<예시>import React from "react"; function Hello({color, name}){ return <div style={{ color }}>안녕하세요 { name }</div> } Hello.defaultProps ={ name: '이름없음' } export default Hello;
App 컨포넌트에서 name이 없는 Hello 컴포넌트 렌더링
import React from 'react'; import Hello from './Hello'; function App() { return ( <> <Hello name="react" color="red"/> <Hello color="pink"/> </> ); } export default App;
:컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children 을 조회
<예제>
Wrapper 컴포넌트 생성import React from 'react'; function Wrapper() { const style = { border: '2px solid black', padding: '16px', }; return ( <div style={style}> </div> ) } export default Wrapper;
App 컴포넌트에서 Wrapper 사용import React from 'react'; import Hello from './Hello'; import Wrapper from './Wrapper'; function App() { return ( <Wrapper> <Hello name="react" color="red"/> <Hello color="pink"/> </Wrapper> ); } export default App;
내부의 내용이 보여지게 하기 위해서는 Wrapper에서 props.children을 렌더링해줘야 한다.
import React from 'react'; function Wrapper({ children }) { const style = { border: '2px solid black', padding: '16px', }; return ( <div style={style}> {children} </div> ) } export default Wrapper;
정리하자면 쓰이는곳(App.js)에서 값을 정한다 = props(부모)
쓰임 당하는 곳(Hello.js 나 Wrapper.js)에서 값을 정한다 = children(자식)
: 컴포넌트에서 동적인 값을 상태(state)라고 부름. 리액트에 useState 함수를 사용해서 컴포넌트에서 상태 관리 가능
누르면 숫자가 바뀌는 Counter 컴포넌트 생성
import React from 'react'; function Counter() { return ( <div> <h1>0</h1> <button>+1</button> <button>-1</button> </div> ); } export default Counter;
App 컴포넌트에서 Counter 렌더링
import React from 'react'; import Counter from './Counter'; function App() { return ( <Counter /> ); } export default App;
<이벤트 설정>import React from 'react'; function Counter() { const onIncrease = () => { console.log('+1') } const onDecrease = () => { console.log('-1'); } return ( <div> <h1>0</h1> <button onClick={onIncrease}>+1</button> <button onClick={onDecrease}>-1</button> </div> ); } export default Counter;
화살표함수를 사용하여 onIncrease, onDecrease 구현
엘리먼트에 이벤트를 설정할때에는 on이벤트이름={실행하고싶은 함수} 형태로 설정
**주의할점
함수형태를 넣어줘야하지, 실행하면 안됨(아래와 같은 코드)onClick={onIncrease()}
<동적인 값 넣기>
useState 함수를 불러와서 사용import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(number + 1); } const onDecrease = () => { setNumber(number - 1); } return ( <div> <h1>{number}</h1> <button onClick={onIncrease}>+1</button> <button onClick={onDecrease}>-1</button> </div> ); } export default Counter;
import React, { useState } from 'react';
: useState 함수를 불러옴
useState 를 사용할때에는 상태의 기본값을 파라미터로 넣어서 호출함
첫번째 원소는 현재상태, 두번째원소는 Setter 함수원래는 다음과 같이 해야함
const numberState = useState(0); const number = numberState[0]; const setNumber = numberState[1];
배열 비구조화 할당 을 통하여 각 원소 추출함
const onIncrease = () => { setNumber(number + 1); } const onDecrease = () => { setNumber(number - 1); }
Setter 함수 피라미터로 전달 받은 값을 최신상태로 설정해줌
<h1>{number}</h1>
함수 업데이트
import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(prevNumber => prevNumber + 1); } const onDecrease = () => { setNumber(prevNumber => prevNumber - 1); } return ( <div> <h1>{number}</h1> <button onClick={onIncrease}>+1</button> <button onClick={onDecrease}>-1</button> </div> ); } export default Counter;