'PROGRAMMING/React' 카테고리의 글 목록

React :: Hook, useState, useEffect, 사용자 정의 Hook

PROGRAMMING/React 2021. 3. 31. 13:09

Hook Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수를 말한다. useState, useEffect 와 같은 내장 Hook 을 사용하거나, 직접 정의해서 사용할 수도 있다. Hook 사용 규칙 Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 한다. **최상위(at the top level)**에서만 Hook을 호출! 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안됨 React 함수 컴포넌트 내에서만 Hook을 호출! (당연히, Class 안에서는 Hook 은 동작하지 않음) 일반 JavaScript 함수에서는 Hook을 호출하면 안됨 그럼 본격적으로 대표적인..

React :: 생명주기 (Lifecycle)

PROGRAMMING/React 2021. 3. 21. 18:33

생명주기 메서드 클래스 Component 에서 생명주기 메서드를 선언하여 컴포넌트가 마운트되거나 언마운트 될 때의 실행할 코드를 작성할 수 있다. 즉 Component 가 보여지고, 사라지고, 업데이트 될 때 호출되는 API 이다. 매우 중요하고, 사용하면 효율적인 프로그래밍을 할 수 있으니 잘 봐두자. componentDidMount() 컴포넌트 추력물이 처음 DOM 에 렌더링 된 후에 실행되는 함수. 주로 외부 라이브러리와의 연동, Component 에서 필요한 데이터 요청 등을 여기에 작성한다. componentDidMount() { //DOM 에 처음 Component 가 렌더링 될 때 실행됨 } componentWillUnmount() 마운트된 컴포넌트가 DOM 으로부터 한 번이라도 삭제된 적 ..

React :: Component, Props, State

PROGRAMMING/React 2021. 3. 20. 19:32

Component 개념적으로JavaScript 함수와 유사한 Component 는, Props 라는 입력을 받고, 로컬 State 를 가지고, React Element 를 반환한다. 따라서 컴포넌트를 통해 재사용 가능한 개별 '조각'을 만들 수 있다. 가장 간단히, 이름을 Props 로 받아서 "Hello, {user}" 를 보여주는 Element 를 반환하는 Component 가 있다고 하자. 그러면 그 Component 를 다른 Compnent 에서 import 해서 한 조각을 갖다 붙이듯 사용할 수 있는 것이다. * Props 의 개념은 밑에서 다루고, 일단 Component 가 외부에서 받아오는 데이터 라고만 알고 있자. 주의할 사항은, Component 이름은 항상! 대문자로 시작한다. Reac..

React :: Element Rendering (엘리먼드 렌더링)

PROGRAMMING/React 2021. 3. 20. 13:27

Element ? Element 는 React 의 가장 작은 단위로, 화면에 표시할 내용을 기술한다. 브라우저 DOM Element 와 달리, React Element 는 일반 객체이다. React DOM 은 React Element 와 일치하도록 DOM 을 업데이트한다. Component 의 "구성 요소"이다. Element 와 Component 는 다른 개념이다. Component 는 다음에 자세히! 불변객체이다. (즉, 생성 이후에 자식/속성 변경 불가) Element 작성하기 JSX 를 살펴볼 때, 이렇게 작성한 것이 바로 element 를 작성한 것이다. const element = Hello, world; DOM 에 Element 렌더링하기 이제 작성한 Element 를 렌더링 해보자. Roo..

React : JSX

PROGRAMMING/React 2021. 3. 20. 02:19

JSX 란? 리액트에서 컴포넌트를 작성할 때 사용하는, JavaScript 를 확장한 문법. JSX 를 다룰 때 기억해야 할 것은, JSX 는 표현식이라는 것이다. 그래서 변수에 할당하고, 인자로 받아들이고, 함수로 반환하고, 표현식을 포함할 수 있다. 변수에 할당하기 가장 기본적인 형태이다. const element = Hello, world!; 그 자체로 표현식이기 때문에 당연히 변수에 할당해서 사용할 수 있다. 이렇게 작성한 JSX 는 React "Element" 를 생성한다. 표현식 포함하기 JSX 는 JavaScript 표현식을 포함할 수 있다. const name = 'react'; const element = hello {name}!; const element2 = hello {userFun..

React :: React 시작하기

PROGRAMMING/React 2021. 3. 20. 00:27

React 를 처음 시작하려면, 여러 방법이 있는데 공식 웹사이트에서도 소개하는 CRA (Create React App) 을 사용해보자. React 란 무엇이고, 뭘 알고 있어야 할까? React 는 페이스북에서 제공하는 JavaScript 기반 UI 라이브러리 이다. 프레임워크가 아니라 라이브러리라서, 그만큼 가볍고 선택지가 넓다. JavaScript 기반이라 JavaScript 를 알면 배우기 쉽다. 반면에 모른다면 좀 애먹을 수 있다. 그런 경우를 위한 대책 - 공식 js 튜토리얼 완독하기 : developer.mozilla.org/ko/docs/Web/JavaScript/A_re-introduction_to_JavaScript (완벽한 대책이 되기는 어렵다. 다만 다른 프로그래밍 언어를 알고 있는..

ABOUT ME

🏰 🏰

티스토리툴바