반응형 개발/react5 React Hook 개념 및 활용 React Hook은 v16.8부터 React 요소로 새로 추가된 기능으로 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 여러가지 기술을 Hook 이라고 부른다. 예를들어, 기존 함수형 컴포넌트에서 할 수 없었던 상태값 관리(useState), 생명주기 함수(useEffect) 등을 사용할 수 있게 되었다. 클래스형 컴포넌트의 단점 - 컴포넌트의 상태 로직 재사용의 어려움 - 복잡한 컴포넌트의 이해하기 어려움 - 코드의 재사용성과 구성의 어려움 - 클래스의 문법의 어려움 위와 같은 클래형 컴포넌트의 단점과 함수형 컴포넌트의 간결함과 편리함 때문에 함수형 컴포넌트가 많이 활용되고 있다. 그리고 이 함수형 컴포넌트를 좀 더 효율적으로 잘 활용할 수 있도록 지원해주는 기능이 Hook이라.. 2023. 9. 23. react 함수형 컴포넌트 생명주기(LifeCycle) 이해 react 함수형 컴포넌트는 이전에 포스팅 했던 클래스형 컴포넌트와 다른 생명주기(라이프사이클) 메소드를 사용한다. 클래스형 컴포넌트 생명주기 메소드에 대한 내용은 다음 링크를 참조하고, 이번에는 함수형 컴포넌트 생명주기에 대해 정리해 본다. https://happy-jjang-a.tistory.com/251 아래는 함수형 컴포넌트와 클래스 컴포넌트 생명주기 메소드를 비교한 내용이다. 함수형 컴포넌트에서는 메소드가 여러개로 분리되어 있지 않고 react Hook 메소드 중 하나인 useEffect가 주요 메소드라고 할 수 있다. 생명주기(라이프사이클) 클래스형 컴포넌트 함수형 컴포넌트 Mount/Update render() return() Mount componentDidMount() useEffect(.. 2023. 9. 10. React Redux 크롬 개발자 도구(Redux DevTools) 설치 및 활용 Redux 크롬 개발자 도구를 설치하면 현재 Store의 상태를 개발자 도구에서 편리하게 조회 가능하고 액션 Dispatch, 액션에 따른 상태 변화 등도 쉽게 확인이 가능하다. 1. 크롬 확장 프로그램 설치 먼저 아래 링크로 접속하여 크롬 웹 스토어로 접속한다. https://chrome.google.com/webstore/category/extensions Chrome 웹 스토어 Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요. chrome.google.com 좌측의 검색창에 "redux devtools"를 입력하여 검색하면 오른쪽에 Redux DevTools 프로그램이 결과로 나오게 되는데 이를 클릭한다. 다음 화면에서 우측 상단의 "Chrome에 추가" 버튼을 클릭해서.. 2023. 9. 9. react 클래스 컴포넌트 생명주기(LifeCycle) 메소드 이해 모든 react 컴포넌트는 페이지 렌더링 되기전 준비 과정부터 페이지에서 사라질 때까지 생명주기(라이프사이클)가 존재한다. 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리하거나 컴포넌트 업데이트 전후로 어떤 작업을 처리해야 할 때 등에 컴포넌트 생명주기 메소드를 사용할 수 있다. 참고로 본문의 생명주기 메소드는 클래스 컴포넌트에서만 사용 가능하고 함수형 컴포넌트에서는 사용할 수 없다. 함수형 컴포넌트에서는 Hooks기능을 사용하여 비슷한 작업을 처리 할 수 있는데 이는 별도로 알아볼 예정이다. react 라이프사이클은 마운트, 업데이트, 언마운트 이렇게 3가지로 나뉜다. 1. 마운트(생성) DOM이 생성되고 웹 브라우저에 나타나는 것을 마운트라고 한다. 이 때의 호출되는 메소드는 아래와 같다. cons.. 2023. 9. 5. React 크롬 개발자 도구 설치(React Developer Tools) React 개발 시 크롬에서 편리하게 사용할 수 있는 React Developer Tools를 설치해본다 먼저 크롬에서 아래 경로로 접속해서 React Developer Tools를 추가해준다. https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 47f63dc54 on 12/6/2022. chrome.google.com 다음으로 아래 접속해서(확장프로그램 관리) 파일 url 엑세스 허용 설정을 .. 2023. 1. 27. 이전 1 다음 반응형
