Function Component ( 함수형 컴포넌트 )
- 정의
기존의 사용하던 Class형 컴포넌트와 다르게 훨씬 짧고 직관적인 코드를 짤 수 있고, 함수형 프로그래밍을 할 수 있게 해줍니다.
기존에 함수형 컴포넌트의 문제점은 state를 만들수 없었고, 생명주기 사용할 수 없었지만 Hooks가 나오고 나서 이 문제점이 해결되었습니다.
또 Class 컴포넌트와 다르게 this를 사용하지 않아 binding에 대한 문제도 없어 사용하기 편리합니다.
Function Component
기본 문법
const App = ( ) => { return ( 리턴 내용 ) }
Function Component ( 함수형 컴포넌트 ) props 받기
App.jsx에서 props로 value = '데이터' 라는값을 보내주었고 children으로 '전달하기' text를 보내주었습니다.
Props 컴포넌트에서 value와 children을 함수의 인자값으로 받아 바로 사용하였습니다.
결과
받아온 props의 value와 children이 렌더된것을 확인할 수 있습니다.
Hooks
- 정의
React 에서 기존에 사용하던 ClassComponent를 이용한 코드를 작성할 필요 없이 state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리입니다.
Hooks를 사용하게 되면 코드의 가독성이 좋아지고 재사용성이 좋아집니다.
useState
- 정의
컴포넌트의 state(상태)를 관리 할 수 있습니다.
- 문법
- 상태를 설정할때
[ Test , setTest ] = useState( Test에 넣을 값으로 객체도 가능합니다. )- 상태를 바꿀때
setTest( 바꿀값 )
useState 테스트
State.jsx에서 함수형 컴포넌트를 생성해주고 count라는 상태를 만들고 count 변수에는 0을 대입하였습니다.
버튼에 클릭 이벤트를 추가하고 클릭시 handleClick 메서드가 실행되도록 하였습니다.
handleClick 함수에서 setCount를 사용하여 현재 count값에서 + 1을 해주었습니다.
결과
처음 기본값은 0이지만 버튼을 클릭할때마다 count가 올라갑니다.
useEffect
- 정의
어떤 변수가 변경될때마다, 특정기능이 작동하도록 할 수 있다.
useEffect가 작동하는 조건
1. 페이지가 처음 렌더링이 될때 ( Class Component의 componenetDidMount )
2. useEffect로 지정한 useState값이 바뀔때 ( Class Component의 componenetDidUpdate )
3. DOM에서 컴포넌트가 제거될때 ( Class Component의 componenetDidUnmount )
- 문법
useEffect ( CallBack 함수 , useState 배열 )
useEffect 테스트
useEffect를 추가하여 count의 값이 바뀔때마다 Hello world!가 출력되게 하였습니다.
결과
처음에 기본값은 0이고 console.log로 출력된것이 없지만 버튼을 클릭할때마다 count가 + 1이 되고 Hello world!가 출력되는것을 확인할 수 있습니다.
