리액트 컴포넌트17 [React] 아이디, 비번 입력 Input 컴포넌트를 만들어보자 2020/08/18 - [Web프론트엔드/리액트] - [React] 리액트 개발환경 구축 2020/08/21 - [Web프론트엔드/리액트] - Visual Studio Code 및 React 관련 플러그인 설치 2020/09/09 - [Web프론트엔드/리액트] - [React] 리액트 테스트 앱 생성 및 수정 2020/09/11 - [Web프론트엔드/리액트] - [React] 리액트에서 사용하는 JSX 2020/09/11 - [Web프론트엔드/리액트] - [React] 리액트의 컴포넌트를 알아보자 2020/09/15 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ① - props 프로퍼티 2020/09/19 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 .. 2020. 9. 29. [React] 컴포넌트의 DOM 관련 이벤트 - 무한 scroll 예제 오늘은 ref라는 특수 프로퍼티를 사용하여 DOM 객체에 접근하는 방법과 onClick 같은 이벤트 프로퍼티에 대해 알아보겠습니다. 쉽게 말씀드리면 getElementById()로 받은 객체를 addEventListener()로 등록한 함수에서 사용하는 것입니다. 자바스크립트를 아시는 분은 근방 이해하실 테니, 아래 무한 scroll 예제를 한번 보시죠! // ..\test_project\src\components\ScrollComponent.jsx import React from "react"; class ScrollComponent extends React.PureComponent { constructor(props) { super(props); this.state = { listEnd: 20, //.. 2020. 9. 28. [React] 컴포넌트의 Lifecycle 생명주기 함수 - 실습 2020/09/24 - [Web프런트엔드/리액트] - [React] 컴포넌트의 Lifecycle 생명주기 함수 - 이론 [React] 컴포넌트의 Lifecycle 생명주기 함수 - 이론 생명주기란 단어가 딱딱할 수 있지만, 쉽게 인간으로 말씀드리면 태어나서 죽을 때까지의 기간입니다. 즉 컴포넌트가 생성되고 소멸될 때까지의 과정으로써, 크게 생성 -> 갱신 -> 소멸 3단계를 jiguin-hankun.tistory.com 이번 글을 읽기 전에 꼭 이론 편을 보고 오시길 추천드리며, 될 수 있으면 이론 화면을 같이 보시는 것이 더욱 좋습니다. 그럼 실습에 들어갈 텐데 이번 코드는 좀 복잡할 수 있어, 실행 화면을 먼저 보여드리고 설명 후에 진행하겠습니다. 이번 실습은 일부로 잘 못된 코드도 넣었고 콘솔 로그.. 2020. 9. 24. [React] 컴포넌트의 Lifecycle 생명주기 함수 - 이론 생명주기란 단어가 딱딱할 수 있지만, 쉽게 인간으로 말씀드리면 태어나서 죽을 때까지의 기간입니다. 즉 컴포넌트가 생성되고 소멸될 때까지의 과정으로써, 크게 생성 -> 갱신 -> 소멸 3단계를 거칩니다. 그 과정에서 개발자는 총 8가지의 생명주기 함수를 이용할 수 있으며, 호출하는 타이밍은 리액트가 정합니다. ○ 생성 과정의 함수 1. constructor( props ) 너무나 자주 봐왔던 생성자 함수입니다. props인자와 가장 위에 super(props)는 필수입니다. 주로 초기화하는 데 사용하며, 특히 스테이트(state)는 여기서 초기화해야 합니다. 2. static getDerivedStateFromProps( props , state ) 이름이 긴 정적(static) 함수입니다. 동적이 아닌 .. 2020. 9. 24. [React] 컴포넌트의 형태를 분류해보자 오늘은 딱히 실습 코드가 없이 이론적인 글이 될 거 같습니다만, 리액트에서 사용하는 컴포넌트에는 대략 이러이러한 종류의 컴포넌트가 있구나~ 정도로 이해하시고 넘어가시길 바랍니다. 1. 함수형 컴포넌트 가장 간단하고 가벼운 컴포넌트로서, 내부 데이터(상태)를 관리하는 스테이트(state)가 없습니다. 즉 내부를 관리할 필요가 없이 외부에서 프로퍼티(props)등을 받아 바로 화면에 뿌려주는 정도로 사용합니다. // 함수형 컴포넌트의 예 function ComponentFunc(props) { const { count, isTen, countUp } = props; return ( 숫자값 : {count} 10이상 : {String(isTen)} 카운트 ); } 2. 클래스형 컴포넌트 이전 포스팅에서도 많이.. 2020. 9. 22. [React] 컴포넌트의 데이터 관리 ③ - 콜백 함수 2020/08/18 - [Web프런트엔드/리액트] - [React] 리액트 개발환경 구축 2020/09/09 - [Web프런트엔드/리액트] - [React] 리액트 테스트 앱 생성 및 수정 2020/09/11 - [Web프런트엔드/리액트] - [React] 리액트에서 사용하는 JSX 2020/09/11 - [Web프론트엔드/리액트] - [React] 리액트의 컴포넌트를 알아보자 2020/09/15 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ① - props 프로퍼티 2020/09/19 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ② - state 스테이트 지난 시간에 state 기능으로 내부 데이터를 관리해봤습니다. 하지만 부모(App) 컴포넌트는 .. 2020. 9. 21. [React] 컴포넌트의 데이터 관리 ① - props 프로퍼티 2020.08.18 - [웹 프론트엔드/React 리액트] - [React] 리액트 개발환경 구축 2020.09.09 - [웹 프론트엔드/React 리액트] - [React] 리액트 테스트 앱 생성 및 수정 2020.09.11 - [웹 프론트엔드/React 리액트] - [React] 리액트에서 사용하는 JSX 2020.09.11 - [웹 프론트엔드/React 리액트] - [React] 리액트의 컴포넌트를 알아보자 1. 프로퍼티로 데이터 전달해보기 전 포스팅에서 기본적인 리액트 컴포넌트 사용법을 알아봤습니다. 하지만 어떻게 서로 다른 컴포넌트 간의 데이터를 관리할까요? 이번에는 프로퍼티를 사용하여 데이터를 주고받아 보겠습니다. // ..\test_project\src\components\ChildCompo.. 2020. 9. 15. [React] 리액트의 컴포넌트를 알아보자 2020.08.18 - [웹 프론트엔드/React 리액트] - [React] 리액트 개발환경 구축 2020.09.09 - [웹 프론트엔드/React 리액트] - [React] 리액트 테스트 앱 생성 및 수정 2020.09.11 - [웹 프론트엔드/React 리액트] - [React] 리액트에서 사용하는 JSX 1. 컴포넌트란 무엇인가? 리액트의 알파이자 오메가인 컴포넌트는 한마디로 "레고 블록"이라고 생각하시면 됩니다. 내가 필요한 여러 블록을 만들어 놓고, 그것을 조립 조합하여 완성된 제품을 만듭니다. 2. 간단한 컴포넌트 구현 전에 포스팅했던 [리액트에서 사용하는 JSX]를 기반으로 작성해보겠습니다. 먼저 본인의 프로젝트 루트폴더(여기서는test_project)의 src폴더 안에 components폴.. 2020. 9. 11. 이전 1 2 다음
