728x90 리액트10 [React] 클래스형 컴포넌트와 함수형 컴포넌트의 차이점 1. 선언방식 🏭 클래스형 컴포넌트 class 키워드로 시작합니다. Component로 상속을 받아야합니다. reunder() 메소드가 반드시 필요합니다. state, lifeCycle 관련 기능사용이 가능합니다. 함수형보다 메모리 자원을 더 사용합니다. 임의 메소드를 정의할 수 있습니다. 📦 함수형 컴포넌트 state, lifeCycle 관련 기능을 사용할 수 없습니다. (Hook을 통해 해결) 클래스형보다 메모리 자원을 덜 사용합니다. 컴포넌트 선언이 편합니다. 2. state 🏭 클래스형 컴포넌트 constructor 안에서 this.state 초기 값 설정 가능합니다. counstructor 없이도 바로 state 초기값을 설정 가능합니다. this.setState() 를 통해 state값을 변경.. 2022. 7. 21. React의 생명 주기(라이프 사이클) 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리입니다. 그러다보니 각각의 컴포넌트에는 라이프 사이클 즉, 컴포넌트의 생명 주기가 존재합니다. 컴포넌트의 생명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이 납니다. 위의 이미지는 리액트의 생명 주기를 나타낸 화면입니다. 이미지에서 볼 수 있듯이 컴포넌트는 생성 => 업데이트 => 제거의 생명 주기를 갖고 있습니다. 그럼 이제 각각의 라이프 사이클이 무엇이고 어떻게 Class와 Hooks를 활용한 함수형 컴포넌트에서 사용하는지 알아보도록 하겠습니다. 아래 목록에서 자주 사용되는 메서드는 색으로 표시하겠습니다. 나머지는 상대적으로 덜 사용됩니다. 마운트(생성) 컴포넌트의 인스턴스가 생성되어, DOM에 삽입될 때 .. 2022. 6. 20. (1-8) React 기초 - State State state는 Toggle Switch나 Counter처럼 컴포넌트 내부에서 변할 수 있는 값이라고 하였다. 실제 애플리케이션에서는 무엇이 "상태"라고 할 수 있을까? 쇼핑몰 장바구니를 예로 들어보겠다. 사용자는 구매할 물건과 당장은 구매하지 않을 물건을 체크박스에 체크하여 구분 짓는다. 이를 장바구니 내에서의 상태로 구분해 본다면 check 된 상태와 check 되지 않은 상태이다. [그림] 장바구니 내에서의 상태 체크박스를 코드로 구현해 보면 아래와 같다. 아래 예시에서는 단순히 체크된 상태에 따라 보이는 글씨가 달라지지만 이를 쇼핑몰에 적용하면 체크 여부에 따라 구매할 물건의 개수나 구매 금액이 변경되고 이에 따라 사용자의 화면 또한 달라진다. 이처럼 컴포넌트 내에서 변할 수 있는 값, 즉.. 2021. 8. 15. (1-7) React 기초 - props props의 특징 컴포넌트의 속성(property)을 의미한다. props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 어플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다. 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다. React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 따라서, 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있다. 객체 형태이다. props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가진다. props는 읽기 전용이다. props는 성별이나 .. 2021. 8. 14. 이전 1 2 3 다음
