ONCE_DEVELOPER

7장. Class형 컴포넌트 Project

Sat, 03 Jul 2021 04:36:54 GMT

📌 Class형 컴포넌트 특징

참고 link : 6장. Class형 컴포넌트와 Function형 컴포넌트 (+Hook)

🐱 Github

habit-tracker project

📍 Project 소개 ( habit-tracker )

습관관리 프로젝트

습관들(Habits)을 추가할 수도 있고 삭제할 수도 있으며 원하는 습관의 횟수를 추가, 감소 할 수 있다.
- 결과 Page

📝 실습 Code

app.jsx
- state habits
- render ```jsx import React, { Component, Fragment } from 'react'; import './app.css'; import Habits from './components/habits'; import Navbar from './components/navbar'; // class App extends Component { //'습관들(habits)'을 state로 설정 state = { habits: [ { id: 1, name: 'Reading', count: 0 }, { id: 2, name: 'Running', count: 0 }, { id: 3, name: 'Coding', count: 0 } ] } /** state의 count를 1씩 증가시키는 함수 (map함수 이용) map() : 현재 state의 habits을 순차적으로 돌며 하위 컴포넌트에서 받은 '습관(habit)'의 id값과 현재 state로 설정된 '습관들(habits)'의 id값을 비교하여 id 값이 같은 경우에(== ' + ' 버튼를 눌렀을 때 전달받은 habit) state의 해당 habit의 count값을 1 더해준다. (아래 코드의 item은 'habits'의 'habit'을 의미 / item이란 변수명은 코더의 마음대로 설정)
- / handleIncrement = (habit) => { const copyHabits = this.state.habits.map(item => { if (item.id === habit.id) {
```
 return { ...habit, count: habit.count + 1 }
```
  } return item; }) this.setState({ habits: copyHabits }) } /** state의 count를 1씩 감소시키는 함수 (map함수 이용) 위의 handleIncrement와 동일한 개념으로 동작하고, 추가로 마이너스가 연산되었을 때 0미만으로 떨어지는 경우 state를 0으로 설정해준다.
- / handleDecrement = (habit) => { const copyHabits = this.state.habits.map(item => { if (item.id === habit.id) {
```
 const count = habit.count - 1;
 return { ...habit, count: count < 0 ? 0 : count };
```
  } return item; }) this.setState({ habits: copyHabits }) } /** habit을 삭제하는 함수 (filter함수 이용) filter() : 현재 state의 habits을 순차적으로 돌며 선택된 habit인 경우를 제외하고 남은 habits를 leftHabits에 담고 이를 현재 state값에 적용한다. (== 선택된 habit만 제거한다.) (아래 코드의 item은 'habits'의 'habit'을 의미 / item이란 변수명은 코더의 마음대로 설정)
- / handleDelete = (habit) => { const leftHabits = this.state.habits.filter(item => item.id !== habit.id); this.setState({ habits: leftHabits }) } /** habit을 추가하는 함수 현재의 state값을 복사하고(Spread Operator) 추가로 param으로 받은 name을 habit의 name으로 설정하고 추가해준다. id값은 중복을 피해주기 위해 Date.now()함수를 이용하였다.
- / handleAdd = (name) => { const habitsCopy = [...this.state.habits,
```
                 { id: Date.now(), name: name, count: 0 }
                ]
```
  this.setState({ habits: habitsCopy }); } /** habits속 모든 habit의 count를 0으로 설정해주는 함수
- / handleReset = () => { const habits = this.state.habits.map((habit) => { if (habit.count > 0) {
```
 return { ...habit, count: 0 };
```
  } return habit; }); this.setState({ habits }) } render() { return ( item.count > 0).length } /> ) } } // export default App; ```

navbar.jsx

props totalCount

import React, { PureComponent } from 'react';
//
class Navbar extends PureComponent {
render() {
   return (
       
           
           Habit Tracker
           {this.props.totalCount}
       
   );
}
}
//
export default Navbar;

habits.jsx

props habits onIncrement / onDecrement / onDelete/ onAdd / onReset

render

import React, { Component } from 'react';
import Habit from './habit';
import HabitAddForm from './habitAddForm';
import HabitFilter from './habitFilter';
//
class Habits extends Component {
handleIncrement = (habit) => {
    this.props.onIncrement(habit);
}
handleDecrement = (habit) => {
    this.props.onDecrement(habit);
}
handleDelete = (habit) => {
    this.props.onDelete(habit);
}
handleAdd = (name) => {
    this.props.onAdd(name);
}
handleFilter = (name) => {
    this.props.onFilter(name);
}
render() {
    return (
        <>
            
            
            
                {
                    this.props.habits.map((habit, index) => {
                        return (
                            
                        )
                    })
                }
            
            
        
    );
}
}
//
export default Habits

habitAddForm.jsx

props onAdd

import React, { memo } from 'react';
//
const HabitAddForm = memo(props => {
const formRef = React.createRef();
const inputRef = React.createRef();
const onSubmit = (e) => {
   e.preventDefault();
   const name = inputRef.current.value;
   name && props.onAdd(name);
   //inputRef.current.value = '';
   formRef.current.reset();
}
//
return (
   
       
       
   
);
});
//
export default HabitAddForm;

habit.jsx

props habit onIncrement / onDecrement / onDelete

import React, { memo } from 'react';
//
const Habit = memo((props) => {
 //컴포넌트가 UI상 등록이 되었을 때 : 사용자에게 보여질 때
const componentDidMount = () => {
   console.log(`habit : ${props.habit.name} mounted`);
}
//컴포넌트 지우기 전에 호출
const componentWillUnmount = () => {
   console.log(`habit : ${props.habit.name} will unmount`);
}
//컴포넌트리시브받을때
const componentWillReceiveProps = () => {
   console.log("컴포 리시브 받을 때");
}
//props 값을 못 받았을 경우에 대비해 defaultProps설정
const defaultProps = {
   id: 0,
   name: 'defaultProps',
   count: 0
}
const handleIncrement = () => {
   props.onIncrement(props.habit);
}
const handleDecrement = () => {
   props.onDecrement(props.habit);
}
const handleDelete = () => {
   props.onDelete(props.habit);
}
const { name, count } = props.habit;
//
return (
   
       {name}
       {count}
       
       
       
   
)
})
//
export default Habit;

6장. Class형 컴포넌트와 Function형 컴포넌트 (+Hooks)

Fri, 02 Jul 2021 07:56:37 GMT

📌 Class형 컴포넌트 특징

Component를 상속 받아야 한다. class Test extends React.Component{//todo..}
자신의 state, props, function 등 모두 this 키워드를 사용하여 접근해야한다. this.state.name / this.props.age / this.handleIncrement

class 안 render() 함수가 포함되어야한다.

class Test extends React.Component{ 
render(){ 
 return (Hello, OnceDeveloper)
}
}

멤버변수나 fucntion등은 Class가 만들어질때 한 번만 할당이 되어지고 변경되는 경우 render함수만 반복적으로 호출된다.
LifeCycle API 이용 가능하다.
- 공식 사이트 link : LikeCycle API

state

선언 및 초기화 state = { name : 'OnceDeveloper' }

변경 - setState() this.setState({name : 'TwiceDeveloper'});

class Test extends React.Component {
state = {
name : 'OnceDeveloper'
}
changeState = () => {
this.setState({name : 'TwiceDeveloper'});
}
render{
return(hello~ {this.state.name});
}
}

[ Test code ]

class Test extends React.Component {
state = {
name : 'OnceDeveloper'
}
render() {
return (
  
    Hello, {this.state.name}
    I am {this.props.age} years old
  
);
}
}

📌 Function형 컴포넌트 특징

클래스형 컴포넌트보다 선언하기 수월하다.
클래스형 컴포넌트보다 메모리 자원을 덜 사용한다.
this 키워드를 사용하지 않아도 접근 가능하다.
props는 파라미터로 받아 사용 가능하다.
render() 함수를 포함하지 않아도 된다.
state, 라이프사이클 API를 사용할 수 없다.
단순히 화면에 값을 출력해주고싶을 때 사용한다.
[ Test code ]

Function funtion test(props){}

function test(props) {
return Hello, {props.name};
}

Arrow Function funtion test = () => {}

function test = (props) =>{
return  Hello, {props.name};
}

📌 React Hooks

공식 사이트 link => React Hooks
Class 형태였던 Component를 Function을 통해 만들 수 있게 해주는 API
Function형 컴포넌트의 장점을 갖고 Class형 컴포넌트와같은 기능들을 Hooks를 이용하여 사용할 수 있게됨.
Class형 컴포넌트와 달리 Function형 컴포넌트는 props나 state가 변경이 되면 코드블락 안 전체 코드가 반복되어짐 => Hooks를 이용해 이전의 값들을 저장할 수 있음.
state
- 선언 및 초기화
- const ['state로 설정할 이름', 'state를 변경할 이름'] = useState('설정할 state 초기값')* const [age, setAge] = useState(20);
- 변경
- state 선언 시 2번째 인자로 설정한 이름으로 호출 (위의 예시로 setAge)* setAge(21);
useEffect
- 처음에 로딩될 때 호출 && 인자값이 업데이트 될 때 호출
- componentDidMount* 와 componentDidUpdate를 합친 느낌 두번째 인자를 빈 값으로[] 호출을하면 처음에만 호출하고 두번째 인자에 값을 넣으면 그 값이 변경될때마다 호출됨
- useEffect() mount될 때 + update될 때 rendering
- useEffect(,[]) mount될 때만
- useEffect(,[age]) mount될 때 + age가 update되는 경우에만 rendering
  [ Test code ]
```
function Test = (props) => {
const [age, setAge] = useState(20);
const changeState = () => {
setAge(21);
}
//useEffect(changeState());
//useEffect(changeState(),[]);
useEffect(changeState(),[age]);
return (
 
   I'm {age} years old.
   my name is {props.name}.
  

);
}
```

5장. React State 사용

Mon, 14 Jun 2021 07:45:24 GMT

📌 State란?

State는 각 컴포넌트가 가지고 있는 개별적인 상태값이다.
클래스형 컴포넌트를 작성할때는 해당 클래스 내부 맨 위쪽에 작성하는 것이 일반적이며 State는 객체이다.
State는 '문자'나 '숫자'가 아닌 객체형태로 생성
값을 변경할 때는 언제나 setState라는 함수를 사용
State에 데이터 저장하는 이유 : State가 변경되면 HTML이 자동으로 재렌더링 됨 (HTML이 새로고침 없이도 스무스하게 변경됨)

📍 Props와 State

공통점
- State는 Props처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체
차이점
- State : 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리됨(변경 가능)
- Props : 함수 매개변수처럼 컴포넌트에 전달되는 읽기전용
Props를 사용했는데도 State를 사용하는 이유는, 사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜서 양쪽의 편의성을 각자 도모하는 것에 있음

📝 실습 Code

App.js

import React, { Component, Fragment } from 'react';
import Counter from './Counter';
//
class App extends Component {
render() {
  return ;
}
}
//
export default App;

Counter.js

import React, { Component } from 'react';
//
class Counter extends Component {
//state는 문자 나 숫자가 아닌 '객체'로
state = {
  number: 0
};
handleIncrease = () => {
  console.log(this.state);
  this.setState({
    number: this.state.number + 1
  });
};
handleDecrease = () => {
  this.setState({
    number: this.state.number - 1
  });
};
render() {
  return (
    
      카운터
      값 : {this.state.number}
      
      
    
  );
}
//
}
export default Counter;

일반 함수 사용식으로 쓰는 경우

this를 인식하지 못 하여 추가 작업이 필요.

<< 예시 >>
constructor(props){
super(props);
this.handleIncrease = this.handleIncrease.bind(this);
this.handleDecrease = this.handleDecrease.bind(this);
}

결과 Page

유튜버 출처 : Minjun Kim

4장. React Props 사용

Mon, 14 Jun 2021 06:14:47 GMT

📌 Props란?

컴포넌트 끼리 값을 전달하는 수단
상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용한다. (하위 컴포넌트가 상위 컴포넌트의 값을 바로 참조할 수 없다는 의미를 뜻함)
객체, 배열 등 유형과 상관없이 모든 것이 전달 가능

💡 defaultProps

실수로 Props 를 빼먹은 경우, 특정 상황에 Props 를 일부러 비워야 할 경우를 대비해 설정
설정 방법-1 (최신 방식)
render() 윗 부분에 작성
```
static defaultProps = {
name: '기본이름'
};
```

설정 방법-2

class 밑(밖)에서 설정

class명.defaultProps = {
name: 'OnceDeveloper'
};

📝 실습 코드

App.js

import React, { Component, Fragment } from 'react';
import MyName from './MyName';
//
class App extends Component {
render() {
  return ;
}
}
//
export default App;

Class형 컴포넌트 이용한 MyName.js

import React, { Component } from 'react';
//
class MyName extends Component {
//defaultProps 첫번째 방법 (최신 방식)
static defaultProps = {
  name: '기본이름'
};
render() {
  return (
    
      안녕하세요! 제 이름은 {this.props.name}입니다.
    
  );
}
}
//defaultProps 두번째 방법
MyName.defaultProps = {
name: 'OnceDeveloper'
};
//
export default MyName;

함수형 컴포넌트 이용한 MyName.js

기능 없이 받아서 보여주기만 하는 경우 주로 이용 코드의 상단에 { Component } 를 import하지 않아도 됨.

import React from 'react';
//
const MyName = ({name}) => {
return (
  
    안녕하세요 ! 제 이름은 {name} 입니다.
  
)
};
//
MyName.defaultProps = {
name : 'OnceDeveloper'
}
//
export default MyName;

결과 Page 1 : App.js에서 props를 호출
결과 Page 2 : defaultProps 적용

유튜버 출처 : Minjun Kim

3장. React 삼항연산자와 주석처리

Mon, 14 Jun 2021 06:04:19 GMT

📍 함수

삼항 연산자
{name === 'velopert!' && 벨로퍼트다! }

JSX 함수 즉시 호출

import React, { Component, Fragment } from 'react';
import './App.css';
class App extends Component {
render() {
  const name = 'velopert!';
  const value = 1;
 //
  return (
    
        {
          (()=> {
            if (value === 1) return 1이다!
            if (value === 2) return 2이다!
            if (value === 3) return 3이다!
            return  없다! 
          })()
        }
    
  );
}
}
export default App;

💡 JSX 주석 처리

방법 1 : Tag 속 입력
```
>리액트
```
방법 2 : { /**/ }
```
{ /* 주석 입력 / }
```

유튜버 출처 : Minjun Kim

2장. React에선 HTML대신 JSX

Wed, 09 Jun 2021 08:16:36 GMT

2장. React에선 HTML대신 JSX

📌 JSX란? (JavaScript eXtension)

쉽게 말해 HTML 문법을 JavaScript 코드 내부에 쓴 것. 어렵게 말해 JavaScript eXtension.. JavaScript의 확장 버전이고 결론은 자바스크립트이다. 즉, JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 주고 있다.

📝 실습 Code

App.js

import logo from './logo.svg';
import './App.css';
import reactDom from 'react-dom';
import { getQueriesForElement } from '@testing-library/dom';
//
function App() {
let posts = '강남 고기 맛집';
let styleObj = {color:'red', fontSize:'30px'};
//fontSize : 15 + 15 + 'px'도 가능
function 함수(){
  return 100
}
return (
  
    
      
         개발 Blog
      
    
    
    {posts}
    {함수()}
     스타일 오브젝트 실험 
  
);
}
//
export default App;

App.css

body{
font-family:
'nanumsquare';
}
.black-nav{
background : black;
width : 100%;
display : flex;
color : white;
padding : 20px;
font-weight : 600;
font-size : 20px;
}

💡 중요 문법

class 부여
- class가 아닌 className을 입력 why? javascript는 class라는 명령어가 있기 때문에 className으로 ex)
style 부여
- 무조건 Object형식으로 집어넣어야 함
- why?* javascript에서 쓸 수 있는 민감한 기호들이 많기 때문 ex)
- 무조건 중괄호('{}')를 이용
- 속성명은 camelCase 관습으로 작성 font-size (x) fontSize(O)

❓ React를 사용하는 이유

데이터 바인딩을 쉽게 해줌 (서버에서 가져온 데이터들을 HTML에 꽂아넣는 것)
기존의 javascript의 경우 document.getElementById().innerHTML = '' JSX의 경우 중괄호('{}')를 이용

변수를 이용하여 출력하는 방법

let posts = '강남 고기 맛집'
 { posts }

함수를 이용하여 출력하는 방법

function 함수() {
return 100;
}
 { 함수() }

import를 이용하여 이미지를 출력하는 방법
```
import logo from './logo.svg';
```

변수를 이용하여 style 부여

let posts = {color : 'blue', fontSize : '30px'};

<오늘의 결과물>

참고 유튜버 : 코딩애플

1장. React 설치와 셋팅 방법

Tue, 08 Jun 2021 17:25:36 GMT

1장. React 설치와 셋팅 방법

📌 React란?

리액트는 페이스북이 만든 사용자 UI 구축을 위한 라이브러리이다.
하나의 단일 url을 가지고 SPA(Single Page Application)으로 사이트를 표현하는 것을 가능케하는 프레임워크다.
대표적인 특징
- JSX 문법
- Component 기반
- Virtual DOM
- Data Flow
- Props and State

1. 필요 툴 설치

Window

Tool	version	remark
node.js	최신 버전	npm 기능 이용
yarn	최신 버전	npm 다운로드 후 cmd에 입력 (npm install --global yarn)
visual studio code	최신 버전	terminal 기능 필요

Mac

Tool version remark

homebrew 최신 버전 yarn 기능 이용 (brew install yarn)

visual studio code 최신 버전 terminal 기능 필요

Tool	version	remark
homebrew	최신 버전	yarn 기능 이용 (brew install yarn)
visual studio code	최신 버전	terminal 기능 필요

VSCode Extensions (필수 X) => 출처

Tool	remark
Prettier	자동 코드 정렬 (셋팅 방법 : File --> Preference --> Setting --> editor.format 입력 [ Setting 입력 창 ] --> Format On Save 체크)
Eslint	Javascript의 스타일 가이드를 따르지 않거나 문제가 있는 안티 패턴들을 찾아서 일관된 코드 스타일로 재정렬 해주도록 도움
ES7 React/Redux/GraphQL/React-Native snippets	react 구조 생성 지원 (예약어 :: rcc => react class component, rsi => react function component)
Highlight Matching Tag	태그를 클릭시 닫는 태그 함께 highlight, 가독성 좋음
Material Theme	테마 정하기
Bracket Pari Colorizer	괄호마다 색깔을 다르게 줌
Indent-rainbow	들여쓰기 된 부분을 하이라이트로 표시
Auto Rename Tag	앞 Tag 변경 시 뒤 Tag 자동 변경
CSS Peek	HTML에서 ctrl 누른 채 클릭 시 정의된 css로 이동
HTML CSS Support	HTML에서 CSS 자동완성 이용하게 해줌
Live Server	CSS 수정 시 브라우저 창 새로고침 안 해도 됨 (Command Palette> Live Server : Open with Live Server 실행)
#### 💡 Prettier 세팅 방법 => 출처

settings.json 수정

{
"editor.formatOnSave": true,
//여기부터 추가함
"javascript.format.enable": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.arrowParens": "avoid",
"prettier.tabWidth": 2,
"prettier.semi": false,
"prettier.singleQuote": true,
"prettier.printWidth": 80,
"prettier.trailingComma": "es5"
}

💡 yarn 오류 시 해결 방법 => 출처

powershell 에서 권한 설정
- PowerShell 을 관리자 권한으로 실행
- get-help Set-ExecutionPolicy 명령어 입력 후 Y(예) 입력
- Set-ExecutionPolicy RemoteSigned 명령어 입력 후 Y(예) 입력

2. React 설치 및 프로젝트 생성 [visual studio code툴로 진행]

프로젝트를 생성할 React 폴더 생성 ex) C:\Users\문서\React class
visual studio code에서 생성한 Folder Open 단축키 : ctrl+K, ctrl+O
visual studio code의 terminal에서 React 설치 명령어 입력 npx 명령어 : npx create-react-app blog yarn 명령어 : yarn create react-app blog ```
npx : lib 설치를 도와주는 명령어[node.js 설치 시 이용 가능]
create-react-app : react 셋팅이 다 된 boilerplate, 한번에 설치할 수 있도록 도와주는 library
blog : blog라는 이름의 react 프로젝트를 생성하겠다. ```
설치 완료 후 visual studio code에서 생성된 프로젝트 Folder Open 위의 예시로는 blog 폴더를 Open 합니다.

3. React 프로젝트 구조

/src/app.js : 메인 페이지에 들어갈 HTML을 작성하는 곳 (index.html 유사) ``` react
app.js 코드 중 p태그에 해당되는 부분을 수정해보면 바뀐 부분을 쉽게 확인할 수 있다.
Edit src/App.js and save to reload.
```
public/index.html : 메인페이지
src/index.js : app.js에 있는 것을 index.html에 넣도록 명령하는 곳 code : document.getElementById('root')
node_modules : 라이브러리 모은 폴더
package.json : 설치한 라이브러리 목록
public : static 파일 보관함 ex) image, fivicon ...

4. 실시간 미리보기

명령어 : npm start || yarn start 브라우저 자동으로 안 열리는 경우 표시된 주소값 입력

<오늘의 결과물>

참고 유튜버 : 코딩애플

ONCE_DEVELOPER

7장. Class형 컴포넌트 Project

📌 Class형 컴포넌트 특징

🐱 Github

📍 Project 소개 ( habit-tracker )

습관관리 프로젝트

📝 실습 Code

app.jsx

navbar.jsx

habits.jsx

habitAddForm.jsx

habit.jsx

6장. Class형 컴포넌트와 Function형 컴포넌트 (+Hooks)

📌 Class형 컴포넌트 특징

Hello, OnceDeveloper

[ Test code ]

Hello, {this.state.name}

I am {this.props.age} years old

📌 Function형 컴포넌트 특징

[ Test code ]

Hello, {props.name}

Hello, {props.name}

📌 React Hooks

useEffect

[ Test code ]

5장. React State 사용

📌 State란?

📍 Props와 State

공통점

차이점

📝 실습 Code

App.js

Counter.js

카운터

일반 함수 사용식으로 쓰는 경우

결과 Page

4장. React Props 사용

📌 Props란?

💡 defaultProps

설정 방법-1 (최신 방식)

설정 방법-2

📝 실습 코드

App.js

Class형 컴포넌트 이용한 MyName.js

함수형 컴포넌트 이용한 MyName.js

결과 Page 1 : App.js에서 props를 호출

결과 Page 2 : defaultProps 적용

3장. React 삼항연산자와 주석처리

📍 함수

삼항 연산자

💡 JSX 주석 처리

방법 1 : Tag 속 입력

>리액트

방법 2 : { /**/ }

2장. React에선 HTML대신 JSX

2장. React에선 HTML대신 JSX

📌 JSX란? (JavaScript eXtension)

📝 실습 Code

App.js

{posts}

{함수()}

App.css

💡 중요 문법

class 부여

style 부여

❓ React를 사용하는 이유

데이터 바인딩을 쉽게 해줌 (서버에서 가져온 데이터들을 HTML에 꽂아넣는 것)

{ posts }

{ 함수() }

<오늘의 결과물>

1장. React 설치와 셋팅 방법

1장. React 설치와 셋팅 방법

📌 React란?

1. 필요 툴 설치

Window

Mac

VSCode Extensions (필수 X) => 출처

💡 yarn 오류 시 해결 방법 => 출처

2. React 설치 및 프로젝트 생성 [visual studio code툴로 진행]

3. React 프로젝트 구조