React Hooks란 ?

React Hooks란 ?

클래스 없이 state를 사용할 수 있는 기능

class component에서 사용되어온 react에서 느껴지는 불편함이나 문제점들을 해결하기 위해 개발

원래 리액트는 주로 class component를 사용했었음.

간결하고 빠르게 사용할 수 있는 함수형 컴포넌트는 생명주기를 사용할 수 없었기 때문인데 react hooks로 사용 가능하게 되었음!

class component

• 더 많은 기능 제공
• 더 긴 코드 양
• 더 복잡한 코드
• 더딘 성능
• 리액트 생명주기 이용시

  • componentDidMount

  • coomponentDidUpdate

  • componentWillUnmount

    … 등 다르게 처리

functional component

• 더 적은 기능 제공 (생명 주기 사용 x)
• 짧은 코드 양
• 심플한 코드
• 더 빠른 성능
• 리액트 훅 사용
  • useEffect안에서 다 처리 가능 (코드 간결)
  • HOC 컴포넌트를 Custom React Hooks로 대체하여 많은 Wrapper 컴포넌트를 줄일 수 있음

HOC(Higher Order Component)란 ?

화면에서 재사용 가능한 로직만을 분리해서 component로 만들고, 재사용 불가능한 UI와 같은 다른 부분들은 parameter로 받아서 처리하는 방법

function usersHoc(Component) {
	return class usersHOC extends React.Component {
		state={
			user: []
		}

	componentDidMount() {
		fetchUsers()
			.then(users => {
				this.setState({users})
			})
	}

	render() {
		return(
			<Component
				{...this.props}
				{...this.state}
			/>	
		)
	}
}

function Apage ({users}) {
//...
}

export default usersHoc(Apage)

function Bpage ({users}) {
//...
}

export default usersHoc(Bpage)

공통적인 부분은 HOC에 넣어주고 그 HOC 컴포넌트로 각각의 컴포넌트를 감싸주면 모든 컴포넌트에 따로 인증을 위한 부분은 넣어주지 않아도 됨

그러나 이렇게 사용하다보면 너무 많은 wrapper가 생기는 문제가 생김.

wrapper가 많아지면 ? → 데이터 흐름을 파악하기가 어려움

Custom React Hooks로 해결

function useAuth() {
	const [users, setUsers] = useState([]);
	
	useEffect(()=> {
		fetchUsers().then(users => {
			setUsers(users);
		});
	), []);
	return [users];
}

function Apage() {
	const [users] = useAuth();
	
	return {
		<div>
			A페이지
			{users.map(({name, url}) => (
				<div key={name}>
					<p>{name}, {url}</p>
				</div>
			))}
		</div>				
	);
}

바벨로 소스코드를 바꿔주었을 때도 함수형 컴포넌트가 훨 씬 짧고 간결

어떤 느낌인지는 알겠는데 써봐야 감이 올 것 같다