반응형

데이터를 행 단위로 가져오려면 판다스에서 제공하는 함수 사용

  • loc : 인덱스 기준으로 행 데이터 읽기
  • iloc : 행 번호를 기준으로 행 데이터 읽기

현재는 데이터가 숫자 형식으로 정렬되어 있어 행 번호 처럼 보이지만,

인덱스는 문자열로 지정할 수 있고, 숫자도 다르게 지정할 수 있습니다. 

인덱스 2를 삭제하면 행번호는 0번부터 시작해서 순서대로 이어지지만

인덱스는 그렇지 않다

 

loc 로 행 추출하기

-0번 인덱스 데이터 가져오기

import pandas as pd
comment1 = pd.read_excel('C:/Users/USER/Desktop/연습문제/댓글내용.xlsx')

print(comment1.loc[0])

 

번호 1
댓글내용 첫번째 댓글입니다
Name: 0, dtype: object

여러 개의 인덱스에 해당하는 행 데이터 추출

-만약,  1 , 2 인덱스의 데이터를 한꺼번에 가져오고 싶으면

리스트에 원하는 인덱스를 담아 loc 속성에 전달

import pandas as pd
comment1 = pd.read_excel('C:/Users/USER/Desktop/연습문제/댓글내용.xlsx')

print(comment1.loc[[0,1]])
 번호   댓글내용
0  1    첫번째 댓글입니다
1  2    두번째 댓글입니다

 

iloc 속성으로 행 데이터 읽어오기

행 번호를 통해 행 데이터를 가져온다

데이터프레임명.iloc[행번호]

print(comment1.iloc[0])

 

음수를 사용해서 데이터를 추출할 수도 있다

print(comment1.iloc[-1])

 

iloc를 통해 여러개의 행 데이터 가져오기

원하는 행 번호를 리스트에 담아 전달

iloc같은 경우는 행과 열 인덱스에 정수리스트를 전달해야 한다

print(comment1.iloc[[0,-1]])

 

loc, iloc를 통해 행과 열 데이터 가져오기

모든 행(:) 에 대해 'year' 과 'continent' 열 데이터만 가져와라

( : ) 모든 데이터를 가져와라 

print(df.loc[:,['year', 'continent']])

 

 

모든 행에 대하여 3번열 데이터 전까지 country(0), continent(1), year(2)의 열데이터만 출력

print(df.iloc[:,:3])

반응형
반응형

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 map : 리스트의 요소를 지정된 함수로 처리해주는 함수

              원본 리스트를 변경하지 않고 새 리스트를 생성

 

  • list(map(함수, 리스트))
  • tuple(map(함수, 튜플))

ex)

>>> a = [1.2, 2.5, 3.7, 4.6]
>>> a = list(map(int, a))
>>> a
[1, 2, 3, 4]

 

모든 반복 가능한 객체를 넣을 수 있음

ex) range를 사용해서 숫자를 만든 뒤 숫자를 문자열로 변환

>>> a = list(map(str, range(10)))
>>> a
['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']

 

x = input().split()    # input().split()의 결과는 문자열 리스트
m = map(int, x)        # 리스트의 요소를 int로 변환, 결과는 맵 객체
a, b = m               # 맵 객체는 변수 여러 개에 저장할 수 있음
반응형

'Language Study > Python' 카테고리의 다른 글

Lambda(람다)  (0) 2020.01.07
프린트문 옵션(문자열 형식)  (0) 2020.01.05
python " _ " (언더바) 쓰임  (5) 2020.01.05
List & Tuple  (0) 2020.01.05
swap  (0) 2020.01.04
반응형

lambda : 쓰고 버리는 일시적인 함수 / 함수가 생성된 곳에서만 필요

즉, 간단한 기능을 일반적인 함수와 같이 정의해두고 쓰는 것이 아니고, 즉시 사용하고 버릴 수 있다.

 

람다 함수 사용법

>>> def inc(n):

	return lambda x: x + n



>>> f = inc(2)

>>> g = inc(4)

>>> print(f(12))

14

>>> print(g(12))

16

>>> print(inc(2)(12))

14

1. map() : 두개의 인수를 가지는 함수 

r = map(function, iterable ...)

- function : 함수 이름

- iterable : 한번에 하나의 멤버를 반환할 수 있는 객체

- map은 리스트의 요소를 각각 처리하므로 lambda의 반환값도 요소여야 한다

 

>>> a = [1,2,3,4]

>>> b = [17,12,11,10]

>>> list(map(lambda x, y:x+y, a,b))

[18, 14, 14, 14]

 

2. filter() 함수

 r = filter(function, iterable)

 

- filter에 인자로 사용되는 function 은 처리되는 각 요소에 대해 boolean 값을 반환

- true 반환 : 그 요소만 남고

- false : 그 요소 제거

 

>>> sort = [2, 18, 9, 22, 17, 24, 8, 12, 27]

>>> list( filter(lambda x: x % 3 == 0, sort) )

[18, 9, 24, 12, 27]

 

3. reduce() 함수

functools.reduce(function, iterable[, initializer])

- 두 개의 필수 인자 + 하나의 옵션 인자

- function 을 사용해서 itreralble 하나의 값으로 줄인다. 

- initializer 사용 시 첫 번째 인자로 추가된다

 

>>> from functools import reduce

>>> reduce(lambda x,y: x+y, [1,2,3,4,5])

15

반응형

'Language Study > Python' 카테고리의 다른 글

리스트에 map 사용하기  (0) 2020.01.27
프린트문 옵션(문자열 형식)  (0) 2020.01.05
python " _ " (언더바) 쓰임  (5) 2020.01.05
List & Tuple  (0) 2020.01.05
swap  (0) 2020.01.04
반응형

루프문을 통해 문제를 풀면 값이 제대로 나오는지 확인하기 위해 사용해야한다.

 

가로로 출력

print('variable',variable,end='')

end = '' : 그다음 출력문이 오른쪽에 이어서 표시 

공백, 콤마 등으로 구분하고 싶으면 end = ' '  나 end = ',' 처럼 문자열을 지정해준다.

 

, 대신 +를 쓰면 문자끼리는 공백없이 이어져서 출력되고 , 숫자끼리는 합산된다.

>>>var_char = "A"

>>>var_num = 1
>>>var_num2 = 2
>>>print('This is string :' + var_char, 'This is number :', var_num+var_num2)

This is string :A This is number : 3

 

여러 항목 출력1

print('{0} and {1}'.format('spam', 'eggs'))
print('{1} and {0}'.format('spam', 'eggs'))
 
num1=1;num2=2
print('{0} {1}'.format(num1,num2))

.format 사용하여 값을 여러 개 주고, 중괄호로 읽어온다

 

여러 항목 출력2

print('Text %s'%var_char)
print('Number %d'%var_num)

	
print('This is text %s This is number %d'%(var_char,num1))
#괄호로 묶어서 출력해준다

출력문 안쪽에 %s %d %f를 써주고, 출력구문 바로 %뒤에 변수명이나 값을 써준다.

(%s:문자열 %d:정수 %f:부동소수점)

반응형

'Language Study > Python' 카테고리의 다른 글

리스트에 map 사용하기  (0) 2020.01.27
Lambda(람다)  (0) 2020.01.07
python " _ " (언더바) 쓰임  (5) 2020.01.05
List & Tuple  (0) 2020.01.05
swap  (0) 2020.01.04
반응형

 

 

 

 

 

for _ in range(5):
	print('hi')

 변수 _ 가 0, 1, 2, 3, 4 값을 가지고 반복을 수행한다

실제 사용되지는 않기 때문에  " _ " 를 사용함

 

=> dummy variable 

 

  1. 인터프리터에서 마지막 값을 저장하고 싶을 때
  2. 값을 무시하고 싶을 때
  3. 변수나 함수 명에 특별한 의미 부여하고 싶을 때
  4. 숫자 리터럴 값의 자릿수 구분을 위한 구분자로 사용할 때

1 번 사용법

 : 인터프리터에 마지막 값 저장하고 싶을 때 사용 ( _ => 20이 저장되어 있다)

>>>_ = 20
>>>print(_)
20

>>>_*3
60

>>>_/2
10.0

2번 사용법 

: 값을 무시하고 싶을 때 사용 

>>>x, _, y = 1, 2, 3

>>>x
1
>>>y
3

>>> x, *_ , y = 1, 2, 3, 4, 5
#여러 개의 값을 무시하려면 *를 붙여서 사용한다 
#index 가 필요없는 for 문을 작성할 경우 사용 가능 

>>>x
1

>>>y
5
for _ in range(n):
	print("test")

_ 를 인덱스로 사용할 수 있다.

 

3번 사용법

: 특별한 의미를 부여하고 싶을 때

  • 폴더
    • __init__.py 라는 파일이 있으면 그 폴더를 패키지로 만들 수 있다
  • 메소드 
    • '_' 가 앞4.에 붙으면 외부 사용자는 사용하지 말라는 권유 문법
    • '__'가 붙은 메소드는 
      • 매직 메소드 : 클래스 작성 시 사용하는 " __init__, __str__' 등의 메소드
      • 맹글링 : 컴파일러, 인터프리터가 변수나 함수명을 일정한 규칙에 의해 변형시키는 것 의미
    • 메소드의 맹글링 규칙은 메소드 앞에 _ClassName 을 붙이는 것으로 맹글링
class A:
	def __double_method(self):
    	pass
class B:
	def __double_method(self):
    	pass

print(dir(A()))
print(dir(B()))

 

4번 사용법

숫자, 문자값의 자릿수 구분 위한 구분자 

dec_base = 1_000_000

print(dec_base)
>>> 1000000

 

반응형

'Language Study > Python' 카테고리의 다른 글

Lambda(람다)  (0) 2020.01.07
프린트문 옵션(문자열 형식)  (0) 2020.01.05
List & Tuple  (0) 2020.01.05
swap  (0) 2020.01.04
6. 모듈  (0) 2019.07.15
반응형

요소를 추가/삭제하거나, 정보를 조회하는 메서드 제공

for 문과 결합하여 연속적이고 반복되는 값을 손쉽게 처리 

 

1. 리스트에 요소 추가하기(삽입)

  • append : 요소 하나 추가
  • extend : 리스트를 연결하여 확장
  • insert :  특정 인덱스에 요소 추가 

    1) append : 리스트 끝에 요소 하나 추가  / 빈 리스트에서 값 추가 가능 

>>>  a = [10, 20, 30]
>>>  a.append(500)
>>>  a
[10, 20, 30, 500]
>>>  len(a)
4

     - 리스트 안에 리스트도 추가 가능 

>>> a = [10, 20, 30]
>>> a.append([500, 600])
>>> a
[10, 20, 30, [500, 600]]
>>> len(a)
4

 

  2) extend : 리스트 확장하기 / 리스트 끝에 다른 리스트를 연결하여 리스트 확장 (리스트 + 리스트 연결한 모양)

>>> a = [10, 20, 30]
>>> a.extend([500, 600])
>>> a
[10, 20, 30, 500, 600]
>>> len(a)
5

   

  3) insert : 리스트의 특정 인덱스에 요소 하나 추가 

  • insert(0, 요소): 리스트의 맨 처음에 요소를 추가
  • insert(len(리스트), 요소): 리스트 끝에 요소를 추가
>>> a = [10, 20, 30]
>>> a.insert(0, 500)
>>> a
[500, 10, 20, 30]

   

>>> a = [10, 20, 30]
>>> a.insert(len(a), 500)
>>> a
[10, 20, 30, 500]

insert 안에 리스트 넣으면 append 처럼 리스트 안에 리스트가 삽입

>>> a = [10, 20, 30]
>>> a.insert(1, [500, 600])
>>> a
[10, [500, 600], 20, 30]

슬라이스에 요소 할당 : 리스트 중간에 요소 여러개 추가 할 때

>>> a = [10, 20, 30]
>>> a[1:1] = [500, 600]
>>> a
[10, 500, 600, 20, 30]

2. 리스트에서 요소 삭제하기

  • pop: 마지막 요소 또는 특정 인덱스의 요소를 삭제
  • remove: 특정 값을 찾아서 삭제

   1) pop() : 리스트의 마지막 요소를 삭제한 뒤, 삭제한 요소 반환(=del)

>>> a = [10, 20, 30]
>>> a.pop()
30
>>> a
[10, 20]
>>> a = [10, 20, 30]
>>> a.pop(1)
20
>>> a
[10, 30]

   2) remove : 리스트에서 원하는 값 찾아 삭제

>>> a = [10, 20, 30, 20]
>>> a.remove(20)
>>> a
[10, 30, 20]

 

3. 특정 값 개수 구하기

  • count : 리스트에서 특정 값 개수 구함
>>> a = [10, 20, 30, 15, 20, 40]
>>> a.count(20)
2

 

4. 리스트 순서 뒤집기

  • reverse : 리스트 요소 순서를 반대로 뒤집음
>>> a = [10, 20, 30, 15, 20, 40]
>>> a.reverse()
>>> a
[40, 20, 15, 30, 20, 10]

 

5. 리스트 요소 정렬

  • sort() 또는 sort(reverse=False): 리스트의 값을 작은 순서대로 정렬(오름차순)
  • sort(reverse=True): 리스트의 값을 큰 순서대로 정렬(내림차순)
  • sorted : 정렬된 새 리스트 생성
>>> a = [10, 20, 30, 15, 20, 40]
>>> a.sort()    # a의 내용을 변경하여 정렬
>>> a
[10, 15, 20, 20, 30, 40]
>>> b = [10, 20, 30, 15, 20, 40]
>>> sorted(b)    # 정렬된 새 리스트를 생성
[10, 15, 20, 20, 30, 40]

 

 

6. 리스트 모든 요소 삭제

  • clear : 리스트 모든 요소 삭제
>>> a = [10, 20, 30]
>>> a.clear()
>>> a
[]

 

 

7. 리스트 슬라이스 조작

  • a[len(a):] => 시작 인덱스 len(a)로 지정 , 리스트의 마지막 인덱스보다 1이 더 큰 상태 / 리스트 끝에서 부터 시작 
>>> a = [10, 20, 30]
>>> a[len(a):] = [500]
>>> a
[10, 20, 30, 500]
>>> a = [10, 20, 30]
>>> a[len(a):] = [500, 600]
>>> a
[10, 20, 30, 500, 600]

#리스트 a 끝에 다른 리스트를 연결 (=extend)

## 리스트 비어 있는지 확인하기 

if not seq:    # 리스트가 비어 있으면 True
if seq:        # 리스트에 내용이 있으면 True

>>> seq = [10, 20, 30]
>>> seq[-1]
30
반응형

'Language Study > Python' 카테고리의 다른 글

프린트문 옵션(문자열 형식)  (0) 2020.01.05
python " _ " (언더바) 쓰임  (5) 2020.01.05
swap  (0) 2020.01.04
6. 모듈  (0) 2019.07.15
5. 제어문  (0) 2019.05.22
반응형

정렬 알고리즘에서 많이 쓰이는 swap 사용법

 

두 변수의 값을 바꾸는 방법

 

예시) a = 3, b = 'abc' a = 'abc', b = 3

 

a = 3
b = 'abc'

a, b = b, a 

 

반응형

'Language Study > Python' 카테고리의 다른 글

python " _ " (언더바) 쓰임  (5) 2020.01.05
List & Tuple  (0) 2020.01.05
6. 모듈  (0) 2019.07.15
5. 제어문  (0) 2019.05.22
4. 추상화 심화  (0) 2019.05.08
반응형

React에는 컴포넌트가 로드될 때, 업데이트 될 때 , 제거될 때 자동으로 호출되는 API 가 존재

=> React 의 Life Cycle API 

초기 생성 API

- 브라우저에 컴포넌트가 나타나기 전 호출되는 API

  • Constructor(props) : 컴포넌트 생성자 함수로 컴포넌트가 새로 만들어 질 때마다 호출
  • ComponentWillMount() : 컴포넌트가 화면에 나타나기 직전에 호출되는 API
    -> 주로 서버를 호출하는 용도로 사용되었는데 이 API를 더 필요하지 않다고 판단하여 사용하지 않게 됨 
    기존에 처리하던 부분은 constructor이나 componentDidMount에서 처리할 수 있음
  • componentDidMount() : 컴포넌트가 나타난 후 호출되는 api
    주로 , D3, masonry 처럼 DOM 을 사용하는 외부 라이브러리와 연동하거나, 데이터를 axios , fetch 등 통해 ajax 요청하거나, DOM 속성(스크롤 설정, 크기 등) 읽거나 직접 변경하는 작업 함

업데이트 API

- 로드된 컴포넌트가 props, state 변화로 인해 변경될 경우 호출되는 API 

  • componentWillReceiveProps(nextProps)  :
    자식 component가 부모 Component로 부터 새로운 props 를 받게 되었을 때 호출
    지금 사용되지 않음 -> getDerivedStateFromProps사용
  • static getDerivedStateFromProps(nextProps, prevState) :
    props로 받아온 값을 state로 동기화하는 작업을 해주어야할 경우 사용

    setState로 state 값을 설정하는 것이 아니라, 객체 형태로 state 값 리턴
    업데이트 할 값이 없다면 null 리턴
  • shouldComponentUpdate(nextProps, nextState)  :
    - 컴포넌트 최적화 작업에서 유용 
    - React는 변화가 발생한 DOM 만 찾아 변화시켜주는데 자식 Component가 직접적으로
    변하지 않았어도 부모가 Component가 리렌더링 되면 자식 컴포넌트도 다시 렌더링되며 Virtual Dom에 그려짐 
    - 기존 DOM 과 비교해서 변화가 발생했다면 실제 DOM 이 변경되고 그렇지 않다면 아무 작업도 하지 않음
    - 많은 렌더링 작업 시 부하가 생기고 기본적으로 true 값을 반환하고 우리가 조작하는 상황에 따라 false를 반환
        => render() 함수를 호출하지 않게 되고, Virtual DOM 에 리렌더링하는 작업을 막을 수 있음 
  • componentWillUpdate(nextProps, nextState) : 
    - shouldComponentUpdate에서 true가 반환되었을 때 호출
    - 주로 애니매이션 효과를 초기화하거나, 이벤트 리스너를 없애는 작업 

    - 이 함수 다음에 render 함수가 호출 (업데이트 이후 쓰이지 않음 아래 함수로 대체)
  • getSnapshotBeforeUpdate(prevProps, prevState)
    -  render 함수와 ComponentDidUpdate사이에 호출 
    - DOM 변화가 일어나기 직전의 DOM 상태를 가져오고, 여기서 그 상태 값(snapshot)을 반환해서 ComponentDidUpdate의
       3번째 매개변수로 받아 올 수 있다
    - 예 ) 현재 위치 스크롤바 유지하고 싶을 때 => 이 , api에서 현재 스크롤바 위치를 구해 그 값을 매개 변수로 반환 =>           componentDidUpdate에서 그 인자를 받아 스크롤바 위치 처리를 해주는 식 
    - render -> getShapshotBeforeUpdate -> 실제 DOM 업데이트 -> componentDidUpdate 순 진행
  • componentDidUpdate(prevProps, prevState, snapshot) : 
    - render 함수가 호출된 후 호출 
    - 이 시점에  this.props와 this.state는 변경된 상태 
    - 매개 변수로 받은 prevProps와 prevState는 말 그대로 변경 이전의 props와 state 값

제거 api

- 컴포넌트가 더 이상 사용되지 않을 경우 호출되는 api 

  • componentWillUnmount() : 
    - 주로 이벤트 제거 , setTimeout 의 clearTimeout 통한 제거 , setinterval의 clearInterval 통한 제거 작업
    - 외부 라이브러리 사용 시, 이 부분에서 해당 라이브러리의 dispose 기능 실행

src/StopWatch.js 수정 (기존 코드 + 주석 범위 안에 life cycle api 추가)

// StopWatch.js
import React, { Component } from "react";
 
class StopWatch extends Component {
  // class fields
  state = {
    sec: 0,
    buttonFlag: true,
    intervalFunction: null
  };
 
  /* Life Cycle API 영역 시작 */
  constructor(props) {
    super(props);
    console.log("constructor");
  }
 
  componentWillMount() {
    console.log("componentWillMount");
  }
 
  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate");
    if (nextState.sec % 2 === 0) {
      console.log(`${nextState.sec} % 2 === 0`);
      return false;
    }
    return true;
  }
 
  componentWillUpdate(nextProps, nextState) {
    console.log("componentWillUpdate");
  }
 
  componentDidUpdate(prevProps, prevState) {
    console.log("componentDidUpdate");
  }
 
  /* Life Cycle API 영역 끝 */
 
  // stop watch 로직
  timer = () => {
    // 비구조화 할당 사용( { sec } 부분 )
    this.setState(({ sec }) => ({
      sec: sec + 1
    }));
  };
 
  // start 버튼 클릭
  start = () => {
    this.setState({
      sec: 0,
      buttonFlag: false,
      intervalFunction: setInterval(this.timer, 1000)
    });
  };
 
  // stop 버튼 클릭
  stop = () => {
    clearInterval(this.state.intervalFunction);
 
    this.setState({
      buttonFlag: true
    });
  };
 
  render() {
    return (
      <React.Fragment>
        <h1>Stop Watch</h1>
        <div>
          <b>{this.state.sec}</b>
          <span>초</span>
          {this.state.buttonFlag ? (
            <button onClick={this.start}>start</button>
          ) : (
            <button onClick={this.stop}>stop</button>
          )}
        </div>
      </React.Fragment>
    );
  }
}
 
export default StopWatch;

 

=> state 내의 sec가 0,2,4 즉, 짝수일 경우 컴포넌트를 변화시키지 않으므로 shouldComponentUpdate 까지만 호출
     실제 변화는 발생하지 않는다 / sec가 5 -> 6으로 변할 때 , stop 버튼을 눌러 state 안에 buttonFlag 값이 바뀌어
     마지막에 컴포넌트의 변화가 일어남

 

에러 처리 api

-render 함수 안에 에러가 발생하면, react 앱 기능이 정지  / 이 현상을 막기 위해 사용하는 api

 

  • componentDidCatch(error, info) :
    - render 함수 안에 에러가 발생 시 , 호출
    - state 에 error 이라는 변수를 생성 -> 해당 api 호출 시 setState로 error 값을 변경하여 render 함수 쪽에
       다시 에러용 UI를 보여줌
    - 주의점 : Component 자신의 render 함수에서 발생하는 에러는 잡을 수 없고, 자식 Component 내부의 render 함수에서 발생하는 에러를 잡음

src/StopWatch.js

-> ErrorMaker라는 인위적으로 에러를 생성하는 컴포넌트를 함수형 컴포넌트 형식으로 생성

    StopWatch 내부에서는 state의 인자로 error라는 값이 추가되었고 Life Cycle API 영역에서 마지막에 componentDidCatch가        추가.

     render 함수에서는 앱 중지를 방지하는 코드가 추가되었고, state의 sec가 3이 되었을 때, ErrorMaker를 생성.

// StopWatch.js
import React, { Component } from "react";
 
// Error 생성용 자식 Component
const ErrorMaker = () => {
  throw new Error("Error Occured!!");
  return <div />;
};
 
class StopWatch extends Component {
  // class fields
  state = {
    sec: 0,
    buttonFlag: true,
    intervalFunction: null,
    error: false
  };
 
  /* Life Cycle API 영역 시작 */
  constructor(props) {
    super(props);
    console.log("constructor");
  }
 
  componentWillMount() {
    console.log("componentWillMount");
  }
 
  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate");
    if (nextState.sec % 2 === 0) {
      console.log(`${nextState.sec} % 2 === 0`);
      return false;
    }
    return true;
  }
 
  componentWillUpdate(nextProps, nextState) {
    console.log("componentWillUpdate");
  }
 
  componentDidUpdate(prevProps, prevState) {
    console.log("componentDidUpdate");
  }
 
  // render에서 에러 발생시 호출
  componentDidCatch(error, info) {
    console.log("componentDidCatch");
    this.setState({
      error: true
    });
  }
 
  /* Life Cycle API 영역 끝 */
 
  // stop watch 로직
  timer = () => {
    // 비구조화 할당 사용( { sec } 부분 )
    this.setState(({ sec }) => ({
      sec: sec + 1
    }));
  };
 
  // start 버튼 클릭
  start = () => {
    this.setState({
      sec: 0,
      buttonFlag: false,
      intervalFunction: setInterval(this.timer, 1000)
    });
  };
 
  // stop 버튼 클릭
  stop = () => {
    clearInterval(this.state.intervalFunction);
 
    this.setState({
      buttonFlag: true
    });
  };
 
  render() {
    // 다음과 같이 에러 발생시에 앱이 중지되는 것을 방지한다.
    if (this.state.error) return <h1>에러 발생!!</h1>;
 
    return (
      <React.Fragment>
        <h1>Stop Watch</h1>
        {this.state.sec === 3 && <ErrorMaker />}
        <div>
          <b>{this.state.sec}</b>
          <span>초</span>
          {this.state.buttonFlag ? (
            <button onClick={this.start}>start</button>
          ) : (
            <button onClick={this.stop}>stop</button>
          )}
        </div>
      </React.Fragment>
    );
  }
}
 
export default StopWatch;

결과는?

x 버튼 누르면 다음과 같이 에러 발생 시 정해둔 ul 가 나타남
-> 에러 발생하는 이유는 

    - 존재하지 않는 함수를 호출하려고 할 때(props로 받은 줄 알았던 함수 호출할 때)

    - 배열이나 객체를 받을 줄 알았을 때 존재하지 않을 때

 

render() {
    // 에러를 유발시키는 유형(실제로 props에서 onClick(), object, array를 받지 않았다고 가정)
    /*
        this.props.onClick();
        this.props.object.value;
        this.props.array.length;
    */
 
    // 다음과 같은 분기문을 추가하여 에러를 방지한다.
    if( !this.props.object || this.props.array || this.props.array.length === 0 ) return null;
 
    // ...
}

 혹시 누락 발생할 거 같으면 다음과 같이 defaultProps를 이용해 해당 값들을 초기화해서 사용

class Test extends Component {
    static defaultProps = {
        onClick: () => console.warning("onClick is not defined"),
        object: {},
        array: []
    }    
}

 

인용

https://dev-kani.tistory.com/11?category=849014
반응형

'Language Study > React' 카테고리의 다른 글

3. props와 state  (0) 2019.11.26
2. JSX  (0) 2019.11.26
1. 준비사항  (0) 2019.11.26

+ Recent posts