출처 - 리액트를 다루는 기술(김민준 지음) props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. Component에 원하는 값을 넘겨줄 때 사용하며, 넘겨줄 수 있는 값은 변수, 함수, 객체 등 JS의 요소라면 제한이 없다. 주로 Component의 재사용을 위해 사용한다. props 값은 부모 컴퍼넌트에서 설정할 수 있다. 자식 컴포넌트에서는 읽기전용이다. props 사용하기 (1) JSX 내부에서 props 렌더링 props 값은 컴포넌트 함수의 파라미터로 받아와서 사용할 수 있다. props를 렌더링할 때 JSX 내부에서 { } 기호로 감싸주면 된다. // MyComponent.js import React from 'react'; const MyCompon..

출처 - 리액트를 다루는 기술(김민준 지음) 컴포넌트는 단순한 템플릿 이상의 기능을 수행한다 데이터가 주어졌을 때 이에 맞추어 UI를 만들어주고, 라이프사이클 API를 이용해 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화할 때, 주어진 작업을 처리할 수 있으며, 임의 메서드를 만들어 특별한 기능을 붙여줄 수 있다 1. 클래스형 컴포넌트 컴포넌트를 선언하는 방식에는 2가지가 있다 (함수형, 클래스형) 클래스형 컴포넌트 예시 import React, { Component } from 'react'; class App extends Component { render() { const name = 'react'; return {name}; } } export default App; 클래스형 컴포넌트에서는 r..

출처 - 리액트를 다루는 기술(김민준 지음) 1. Prettier란? 코드 스타일을 간편하게 커스터마이징하고 수정해주는 VS Code 확장도구 2. Prettier 설정하기 먼저 VS Code 확장도구 Prettier를 설치한다. 그리고 프로젝트의 루트 디렉터리에서 .prettierrc 라는 파일을 생성한 후 다음 내용을 입력한다 // .prettierrc { "singleQuote": true, // 큰 따옴표 대신 작은 따옴표 사용 "semi": true, // 세미콜론 자동으로 붙임 "useTabs": false, // 들여쓰기 할 때 탭 대신 공백 "tabWidth": 2 // 공백 2칸 사용 } 이후 저장할 때 자동으로 코드 정리되도록 format on save 를 설정해준다

출처 - 리액트를 다루는 기술(김민준 지음) 4. JSX 문법 (1) element 감싸기 모든 element들은 최상단의 부모 element 하나로 감싸져야 한다 function App() { return ( 리액트 안녕! 잘 작동하니? ); } 꼭 div 태그를 사용하고 싶지 않으면 Fragment 기능을 사용할 수도 있다. import fragment가 필요하다. import { fragment } from 'react'; function App() { return ( 리액트 안녕! 잘 작동하니? ); } (2) JavaScript 표현식 JSX 내부에서 JS 표현식을 사용하려면 { } 로 감싸면 된다 import React from 'react'; function App() { const name..

출처 - 리액트를 다루는 기술(김민준 지음) 1. 코드 이해하기 create-react-app 으로 만든 리액트 프로젝트 파일 알아보기! src/App.js 최상단에는 다음과 같은 코드가 있다. import React from 'react'; import logo from './logo.svg'; import './App.css'; 번들러 번들러(bundler)는 Node.js 환경에서만 지원하는 module import, export 기능을 브라우저에서 사용하게끔 도와준다. 번들(bundle)은 묶는다는 뜻이므로, 파일을 묶듯이 연결해 준다. 웹팩 번들러의 종류에는 웹팩, Parcel, browserify 등의 도구 들이 있으며 리액트에서는 주로 웹팩을 사용한다. 웹팩의 편의성과 확장성이 다른 도구보다..

▶ 이전글 2021.09.29 - [데이터 분석/Ecommerce] - [선형회귀] 고객별 연간 지출액 예측하기 - 3 [선형회귀] 고객별 연간 지출액 예측하기 - 3▶ 이전글 2021.09.28 - [데이터 분석/Ecommerce] - [선형회귀] 고객별 연간 지출액 예측하기 - 2 [선형회귀] 고객별 연간 지출액 예측하기 - 2 ▶ 이전글 2021.09.28 - [데이터 분석/Ecommerce] - [선형회귀] 고..ggarden.tistory.com ▶ 강의명▷ [패스트캠퍼스] 파이썬을 활용한 이커머스 데이터 분석 ▶ 주제▷ ch2. 고객별 연간 지출액 예측 (Linear Regression) -- 강의 내용 -- 10. 선형회귀의 원리 선형 회귀분석의 큰 목표는 최적의 모델(라인)을 찾는 것이라 ..

▶ 이전글2021.09.28 - [데이터 분석/Ecommerce] - [선형회귀] 고객별 연간 지출액 예측하기 - 2 [선형회귀] 고객별 연간 지출액 예측하기 - 2▶ 이전글 2021.09.28 - [데이터 분석/Ecommerce] - [선형회귀] 고객별 연간 지출액 예측하기 - 1 [선형회귀] 고객별 연간 지출액 예측하기 - 1 ▶ 강의명 ▷ [패스트캠퍼스] 파이썬을 활용한 이커머스 데ggarden.tistory.com ▶ 강의명▷ [패스트캠퍼스] 파이썬을 활용한 이커머스 데이터 분석 ▶ 주제▷ ch2. 고객별 연간 지출액 예측 (Linear Regression) -- 강의 내용 -- 09-1. 파이썬 Tip ①. Numpy와 Pandas numpy array는 일반 리스트와 약간 다르다 a = [1,..

▶ 이전글2021.09.28 - [데이터 분석/Ecommerce] - [선형회귀] 고객별 연간 지출액 예측하기 - 1 [선형회귀] 고객별 연간 지출액 예측하기 - 1▶ 강의명 ▷ [패스트캠퍼스] 파이썬을 활용한 이커머스 데이터 분석 ▶ 주제 ▷ ch2. 고객별 연간 지출액 예측 (Linear Regression) -- 강의 내용 -- 01. 분석의 목적 선형회귀분석을 통해 고객체류ggarden.tistory.com ▶ 강의명▷ [패스트캠퍼스] 파이썬을 활용한 이커머스 데이터 분석 ▶ 주제▷ ch2. 고객별 연간 지출액 예측 (Linear Regression) -- 강의 내용 -- 06. 선형 회귀 모델 만들기 선형 회귀모델을 만들기 위해 모듈을 불러온다 import statsmodels.api as sm..