웹 프론트엔드42 [React] 컴포넌트의 형태를 분류해보자 오늘은 딱히 실습 코드가 없이 이론적인 글이 될 거 같습니다만, 리액트에서 사용하는 컴포넌트에는 대략 이러이러한 종류의 컴포넌트가 있구나~ 정도로 이해하시고 넘어가시길 바랍니다. 1. 함수형 컴포넌트 가장 간단하고 가벼운 컴포넌트로서, 내부 데이터(상태)를 관리하는 스테이트(state)가 없습니다. 즉 내부를 관리할 필요가 없이 외부에서 프로퍼티(props)등을 받아 바로 화면에 뿌려주는 정도로 사용합니다. // 함수형 컴포넌트의 예 function ComponentFunc(props) { const { count, isTen, countUp } = props; return ( 숫자값 : {count} 10이상 : {String(isTen)} 카운트 ); } 2. 클래스형 컴포넌트 이전 포스팅에서도 많이.. 2020. 9. 22. [ES6] 프로토타입 prototype에서 class 클래스로 2020.09.18 - [웹 프론트엔드/자바스크립트] - [ES6] 템플릿 문자열 (Template String) 프로토타입 prototype 이번 포스팅은 ES6에 추가된 클래스에 대해 설명해보려 합니다. 하지만 기존 자바스크립트의 프로토타입을 알지 못하면 비교가 어려우니, 간단하게라도 기존 버전에서는 어떻게 클래스를 표현했는지 살펴보겠습니다. 내용은 사각형의 넓이를 구하고(x * y) 그다음에 확장(extends) 또는 상속하여 부피를 구하는(x * y * z) 식입니다. // 생성자(constructor) 형태로 함수 선언 function Area(x, y) { this.name = "Area"; this.set(x, y); } // static 객체 생성 함수 Area.create = functi.. 2020. 9. 21. [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] 컴포넌트의 데이터 관리 ② - state 스테이트 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. 9. 19. [ES6] 템플릿 문자열 (Template String) 2020.09.16 - [웹 프론트엔드/자바스크립트] - [ES6] 화살표 함수와 커링 디자인 패턴 오늘은 가볍게 템플릿 문자열에 대해서 알아보겠습니다. 먼저 기존 자바스크립트의 병합 연산자(+)입니다. var val1 = "코로나"; var val2 = 9; console.log(val1 + val2); // 코로나9 var val3 = 10; console.log(val1 + val2 + val3); // 코로나910 console.log(val1 + (val2 + val3)); // 코로나19 이처럼 기존 병합 연산자는 플러스 기호를 쓰기 때문에 문자형과 숫자형의 연산이 알아보기 어렵습니다. 또한 문자열 안에 계산식을 넣을 수 없기 때문에 코드가 길어지고 가독성이 떨어집니다. (디버깅 지옥 오픈) .. 2020. 9. 18. [ES6] 화살표 함수와 커링 디자인 패턴 2020.09.05 - [웹 프론트엔드/자바스크립트] - [ES6] 전개 연산자(spread operator) 사용법 화살표 함수 ES6에 새로 추가된 화살표 함수(arrow function)는 함수 표현을 간단하게 할 수 있습니다. 기존 함수 사용과 화살표 함수 표현식을 비교해보고, 그것을 응용한 커링 디자인 패턴을 보겠습니다. // 기존 function plusFunc(num1, num2) { return num1 + num2; } var plusFunc = function (num1, num2) { return num1 + num2; }; // ES6 var plusFunc = (num1, num2) => { return num1 + num2; }; var plusFunc = (num1, num2).. 2020. 9. 16. [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. [React] 리액트에서 사용하는 JSX 2020.08.18 - [웹 프론트엔드/React 리액트] - [React] 리액트 개발환경 구축 2020.09.09 - [웹 프론트엔드/React 리액트] - [React] 리액트 테스트 앱 생성 및 수정 간단한 JSX 사용해보기 JSX (JavaScript XML)는 자바스크립트에 XML을 추가 확장한 문법입니다. HTML에서 XML로 다시 JS + XML이 바로 JSX입니다. 참 간단하죠? 상기한 테스트앱 생성 글을 기반으로 JSX 사용해보겠습니다. 먼저 App.js 파일을 열고 하기와 같이 수정합니다. // ..\test_project\src\App.js import React, { Component } from "react"; class App extends Component { render().. 2020. 9. 11. 이전 1 2 3 4 5 다음
