WoohyunKing의 개발 성장일지

React에서 클래스 컴포넌트를 사용하였던 이유 React의 함수 컴포넌트는 클래스 컴포넌트보다 더 짧고 간결한 코드, 높은 가독성, 더 빠른 성능, 보다 적은 메모리 사용이라는 장점을 가지고 있었지만 상태 관리나 컴포넌트의 생명주기(LifeCycle)를 관리할 수 없다는 단점으로 인해 클래스 컴포넌트를 사용하고 있었습니다. 하지만 React 16.8 버전에서 Hook 이라는 개념이 등장하고 난 뒤로 함수 컴포넌트를 주로 사용하게 되었고, React 에서도 함수 컴포넌트 사용을 권장하게 되었습니다. 상태(State) 관리 👉🏻 useState Hook 생명주기 관리 👉🏻 useEffect Hook React Hook의 또 다른 장점 HOC(Higher Order Component) 란 ? HOC(High..

useRef Hook은 저장공간(변수 관리), DOM 요소 접근을 위해 사용되는 리액트 훅이다. 여기서 Ref는 'Reference'의 약자로, 참조라는 의미를 가지고 있다. useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. (출처 : React 공식 홈페이지) 1) 저장공간(변수 관리) 컴포넌트 내에서 변수를 관리한다고 하면 이전에 배운 state를 떠올려볼 수 있다. 함수형 컴포넌트에서 state를 관리하고 수정할 때 useState Hook을 사용하고, state가 변경될 때마다 컴포넌트가 다시 렌더링되는데 함수형 컴포넌트에서 다시 렌더링 된다는 것은 함수 자..

클래스형 컴포넌트(Class Component) class App extends Component { render() { return 안녕! } } 기존의 React는 Class Component를 기반으로 작업했다. Class Component를 이용해 만들어낸 컴포넌트는 말그대로 하나의 객체처럼 동작할 것이다. this 를 통해 자기 자신을 칭하고, 뭔가 변화가 생기면 render() 메서드를 다시 호출해 리랜더링을 할 것이다. 그런데 객체를 사용할 때면 매번 언급되는 문제점이 있다. 객체를 이용한 프로그래밍 방식에서는 객체가 가지고 있는 상태와 메서드가 적절히 어우러지도록 설계한다. 이런 구조에서 메서드의 결과물은 상태의 영향을 받게 되는데, 상태에 따라 그 결과 값이 의도치 않게 변한다는 점이 문..