라이프 사이클 함수


라이프 사이클?

모든 리액트 컴포넌트에는 라이프 사이클(수명 주기)이 존재합니다. 라이프 사이클은 컴포넌트가 생성되고 소멸될 때까지 일련의 과정을 의미 합니다.


라이프 사이클 함수

총 10가지의 함수가 존재하며, will이 붙은 함수는 어떤 작업을 하기 전에 실행되고, did가 붙은 함수는 작업을 한 후에 실행됩니다.


라이프 사이클 함수를 사용 하는 경우

어떤 작업을 수행할 때 렌더링 할 때 처리해야 하는 경우가 있고 업데이트 전후로 처리해야 하는 경우가 있는데 이럴 경우 라이프 사이클 함수를 이용해서 처리합니다.


컴포넌트의 라이프 사이클

마운트(페이지에 컴포넌트가 나타남) -> 업데이트(리렌더링) -> 언마운트(페이지에서 컴포넌트가 사라짐)


마운트?

DOM이 생성되고 웹 브라우저상에 나타는 과정


업데이트? 

컴포넌트를 업데이트 하는 경우로 아래와 같은 경우에 동작합니다.

1) Props가 바뀔 경우

2) state가 바뀔 경우

3) 부모 컴포넌트가 리렌더링 할 경우

4) this.forceUpdate로 강제로 렌더링을 트리거 할 경우


언마운트?

마운트의 반대 과정으로 DOM에서 컴포넌트를 제거하는 과정


관련 함수

1) render()

컴포넌트 모양새를 정의

이 함수 안에서 this.props, this.state에 접근

리액트 요소를 반환, 아무것도 보여주지 않는다면 null이나 false를 반환

state를 변형하면 안되고 웹 브라우저에 접근해서도 안됨 => DOM 정보를 가져오거나 변화를 줄 떄에는 componentDidMount에서 처리해야 함

2) Constructor()

Constructor(props) {...}

컴포넌트를 처음 만들 때 사용

초기 state설정

3) getDerivedStateFormProps()

리액트 v16.3 이후에 새로 만든 라이프사이클 함수

props로 받아온 값을 state에 동기화 시키는 용도로 사용

컴포넌트를 마운트하거나 props를 변경할 때 호출

4) componentDidMount()

componentDidMount(){...}

컴포넌트를 만들고 첫 렌더링을 마친 후 실행

다른 자바스크립트 라이브러리나 프레임워크의 함수 호출, 이벤트 등록, setTimeout, setInterval, 네트워크 요청 등 비동기 작업 처리

5) shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState) {...}

props또는 state 변경 시 리렌더링을 시작할지 여부를 지정하는 함수

반드시 true & false 반환 해야함

현재 props, state 변경은 this키워드를 붙이고 새로 설정할 props, state는 nextProps, nextState로 접근

  6) getSnapshotBeforeUpdate()

v16.3 이후 만든 메소드

ender 메소드를 호출한 후 DOM에 변화를 반영하기 바로 직전에 호출하는 함수

componentDidUpdate에서 세번 째 파라미터인 snapshot 값으로 전달 받을 수 있는데 주로 업데이트 하기 직전의 값을 참고할일이 있을 때

  7) componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot) {...}

prevProps, prevState 사용하여 이전에 가졌던 데이터에 접근

getSnapshotBeforeUpdate에서 반환한 값이 있다면 여기서 snapshot 값을 전달 받을 수 있음

8) componentWillUnmount()

componentWillUnmount(){...}

DOM에서 제거할 때 실행

componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM이 있다면 여기에서 제거 작업


예제

아래 예제는 함수가 언제 동작하는 지 확인해보기 위해 작성한 예제입니다.


색을 랜덤으로 업데이트 하는 버튼과 숫자를 올려주는 버튼 두개로 구성됩니다.


숫자가 4로 끝날 경우에만 리렌더링 되지않고, 나머지 숫자일 때에는 업데이트가 발생하면 리렌더링 됩니다.


LifeCylce.js

import React, { Component } from 'react';

class LifeCycle extends Component {
state ={
number : 0,
color : null
}
myRef = null;
constructor(props){
super(props);
console.log('constructor()');
}

static getDerivedStateFromProps(nextPorps, prevState){
if(nextPorps.color !== prevState.color){
return {
color:nextPorps.color
};
}
return null;
}
componentDidMount(){
console.log('componentDidMount()');
}
shouldComponentUpdate(nextPorps, nextState){
console.log("shouldComponentUpdate(),", nextPorps,",", nextState);
return nextState.number %10 !==4;
}

componentWillUnmount(){
console.log("componentWillUnmount()");
}

handleClick = () =>{
this.setState({
number : this.state.number +1
});
}

getSnapshotBeforeUpdate(prevProps, prevState){
console.log('getDerivedStateFromProps()');
if(prevProps.color !== this.props.color){
return this.myRef.style.color;
}
return null;
}

componentDidUpdate(prevProps, prevState, snapshot){
console.log('componentDidUpdate()');
if(snapshot){
console.log('업데이트 되기 직전 색상 : ',snapshot);
}
}

render() {
console.log('render()');
const style={
color:this.props.color
}
return (
<div>
<h1 style = {style} ref={ref=>this.myRef=ref}>
{this.state.number}
</h1>
<p>color : {this.state.color}</p>
<button onClick={this.handleClick}>plus</button>
</div>
);
}
}

export default LifeCycle;



app.js


import React, { Component } from 'react';
import './App.css';
import LifeCycle from './component/LifeCycle';

function getRandomColor(){
return '#'+Math.floor(Math.random()*16777215).toString(16);
}

class App extends Component {
state = {
color : '#000000'
}
handleClick = () =>{
this.setState({
color : getRandomColor()
});
}
render() {
return (
<div>
<button onClick={this.handleClick}>Random Color</button>
<LifeCycle color={this.state.color}/>
</div>
);
}
}

export default App;


동작결과


처음 렌더링 된 후 찍힌 결과입니다. 생성자 함수, getDerivedStateFromProps함수, render함수 componentDidMount 함수가 차례대로 실행 됩니다.



초기 렌더링 후 화면입니다.


랜덤 버튼과 플러스 버튼을 클릭했을 때의 결과 입니다. 숫자가 4로 끝나는 경우에만 리 렌더링 되지않고 나머지의 경우에는 리 렌더링 됩니다.


랜덤버튼 클릭


플러스 버튼 클릭


두 버튼을 클릭했을 때 바뀌는 화면입니다.


참고 : 리액트를 다루는 기술(저:VELOPERT)


저작자표시 비영리

'언어 > ReactJS' 카테고리의 다른 글

[React] 리덕스 개념  (0) 2019.05.24
[React] 함수형 컴포넌트  (0) 2019.05.21
[React] 컴포넌트 반복  (0) 2019.05.05
[React] Ref  (0) 2019.05.02
[React] 이벤트 핸들링  (2) 2019.04.25

람다 함수


 람다 함수는 한 줄의 문(statement)으로 정의하는 함수로 축약 함수라고도 합니다.


- 람다 함수


1) 구문(Syntax)
 lambda 콤마로 구분된 인수들 : 식

2) 특징
 - 함수처럼 기본 인수와 가변 인수를 가질 수 있음
 - 대부분 함수 이름을 정하지 않고, 일회성으로 사용

3) 람다 함수 사용
 아래 코드와 같이 람다 함수를 사용하면 보다 쉽게 정의 및 사용할 수 있습니다. 1부터 10까지의 수를 대입해 각각 다항식을 계산하는 코드입니다.
----------------------------------------------------------------------------------------
# -*- coding: utf-8 -*-

# 일반 함수 사용

def f1(x):
    return x*x + 3*x -10
def f2(x):
    return x*x*x
def g(func):
    return [func(x) for x in range(1,11)]

print g(f1)
print g(f2)

# 람다 함수 사용

def g2(func):
    return [func(x) for x in range(1,11)]
print g2(lambda x: x*x + 3*x -10)
print g2(lambda x: x*x*x)
----------------------------------------------------------------------------------------
(실행 결과)

[-6, 0, 8, 18, 30, 44, 60, 78, 98, 120]

[1, 8, 27, 64, 125, 216, 343, 512, 729, 1000]

[-6, 0, 8, 18, 30, 44, 60, 78, 98, 120]

[1, 8, 27, 64, 125, 216, 343, 512, 729, 1000]

----------------------------------------------------------------------------------------

- 람다 함수의 활용


 람다 함수를 활용하는 방법입니다. map(), filter(), reduce() 세 내장 함수를 같이 활용합니다. 세 내장 함수는 공통적인 인자를 가집니다.

 - 첫 번째 인자 : function(함수) → 일반적으로 람다 함수 활용

 - 두 번째 인자 : 시퀀스 자료형 → 문자열, 리스트, 튜플 활용

1) map() 내장 함수

 - 구문(Syntax)
map(function, seq) 
# 각 원소 값들에 대해 함수에 적용한 결과를 동일한 자료형으로 반환

 - 활용
----------------------------------------------------------------------------------------
X=[1,2,3,4,5]
Y=map(lambda x:x*x, X) # X가 리스트이므로 결과도 리스트로 반환
print Y
----------------------------------------------------------------------------------------
(실행 결과)
[1, 4, 9, 16, 25]
----------------------------------------------------------------------------------------

2) filter() 내장 함수

 - 구문(Syntax)
filter(function, seq) 
# 각 원소 값들에 대해 함수에 적용한 결과 중 참인 원소 값들만 동일한 자료형으로 반환

 - 활용
----------------------------------------------------------------------------------------
F='python study'
G=filter(lambda x: x>'o', F) # 알파벳 o 보다 큰 문자만 반환
print G
----------------------------------------------------------------------------------------
(실행 결과)
pytstuy
----------------------------------------------------------------------------------------

3) reduce() 내장 함수

 - 구문(Syntax)
filter(function, seq, (initial)) 
# 각 원소 값들에 대해 함수에 적용하면서 하나의 값으로 매핑
# 람다 함수 인자가 반드시 2개여야하며, initial(초기값)은 앞의 인자의 초기 값

 - 활용
----------------------------------------------------------------------------------------
print reduce(lambda x,y : x+y, range(1,6))
----------------------------------------------------------------------------------------
 initial 즉 초기 값을 설정하지 않으면 0이 들어가게 됩니다. 앞의 인자에 결과를 임시 누적하면서 계속 뒤에 인자와 연산을하고 최종적으로 계산된 결과를 출력합니다.


(실행 결과)
15
----------------------------------------------------------------------------------------

- 활용2
 문자열의 초기값으로 n을 주고 거꾸로 뒤집은 결과입니다.
----------------------------------------------------------------------------------------
print reduce(lambda x,y : y+x, 'ohtyP','n')
----------------------------------------------------------------------------------------
(실행 결과)
Python
----------------------------------------------------------------------------------------

* 출처 : 한국기술교육대학교 온라인평생교육원 파이썬프로그래밍




저작자표시 비영리

'언어 > Python' 카테고리의 다른 글

[파이썬] 함수  (0) 2017.03.06
[파이썬] 디렉토리 다루기  (0) 2017.02.25
[파이썬] 파일 다루기  (0) 2017.02.24
[파이썬] 파일 입·출력  (0) 2017.02.22
[파이썬] 사전  (0) 2017.02.19

함수


 앞에서 공부할 때 활용했던 함수에 대해 자세히 알아보겠습니다.


- 함수의 정의


1) 함수란?
 여러 개의 statement를 하나로 묶은 단위

2) 함수의 장점
 - 반복 수행 가능
 - 코드의 일정 부분을 논리적으로 독립화 가능

3) 함수 정의
 함수는 def 키워드를 사용해 정의하며, return 키워드로 반환 값을 지정할 수 있습니다. 아무런 내용을 쓰지 않을 때에는 pass 키워드를 사용해야 합니다. 인자를 사용하지 않아도 괄호( )를 사용해야 합니다. 또한 콜론(:)을 꼭 붙여줘야 합니다.
----------------------------------------------------------------------------------------
# 함수 정의
def test_func():
pass

def add(a,b):
return a+b
----------------------------------------------------------------------------------------

- 함수의 호출과 인수 값 전달


1) 함수 호출
 파이썬에서는 모든 것들이 객체입니다. 따라서, 함수 이름 자체는 함수 객체의 레퍼런스를 지닙니다. 아래와 같이 참조 값을 복사해서 사용할 수 있습니다. 함수 호출은 함수 이름(인자)의 형태로 사용합니다.
----------------------------------------------------------------------------------------
# F_change 함수 정의
def F_change(a):
    print '썹씨를 화씨로 변환합니다.'
    print a*1.8+32
# F_change 함수 호출
F_change(15)

# a변수에 F_change 함수 레퍼런스를 복사한 후에 a변수를 이용해 F_change 함수 호출
a=F_change
a(15)
----------------------------------------------------------------------------------------
(실행 결과)
썹씨를 화씨로 변환합니다.
59.0
썹씨를 화씨로 변환합니다.
59.0
----------------------------------------------------------------------------------------

2) 인수 값 전달 방법
 다른 프로그래밍 언어를 공부해보신 분들은 아시겠지만, 인수를 전달하는 방식에는 값 전달 방식(Call-by-Value)과 참조에 의한 호출 방식(Call-by-Reference)이 있습니다. 파이썬에서는 기본적으로 값 전달 방식이지만, 실제로는 참조에 의한 호출의 형태입니다.

3) 반환문
 return문을 사용해서 값을 반환하는데, return문이 없는 함수도 none객체가 반환이 됩니다. 두 개 이상의 값을 반환할 때에는 튜플로 반환됩니다. 
----------------------------------------------------------------------------------------
# 리턴 값을 튜플의 형태로 사용했을 때
def swap(a,b):
    return (b,a)

print swap(10,20)

# 리턴 값을 콤마(,)로만 사용했을 때
def swap2(a,b):
    return b,a

print swap2(10,20)
----------------------------------------------------------------------------------------
# 튜플의 특성으로 괄호를 사용하지 않으면 기본적으로 튜플이 됨
(실행 결과)
(20, 10)
(20, 10)
----------------------------------------------------------------------------------------

 추가적으로 인자에 대한 자료형 결정은 호출을 할 때 자료형의 타입에 따라 자료형이 결정됩니다.

- 함수의 인수처리

 
1)  기본 인자
 함수를 호출할 때 인수를 넘겨주지 않아도 인수가 가지는 값으로 기본 인수 값이라고 합니다. 일반 인자와 기본 인자가 같이 있다면 기본 인자는 가장 뒤에 와야 합니다. 함수를 호출할 때 인자가 있다면 호출할 때 사용한 인자를 더 우선합니다.
----------------------------------------------------------------------------------------
def add_10(a,b=10):
    return a+b
print add_10(15)   # 인자를 입력하지 않으면 기본인자와 연산
print add_10(15,9) # 기본인자보다 입력한 인자 9를 더 우선
----------------------------------------------------------------------------------------
(실행 결과)
25
24
----------------------------------------------------------------------------------------

2) 키워드 인수
 키워드 인수는 인자 값 전달시에 이름과 값을 전달하는 방식입니다. 키워드 인수 역시 기본 인자처럼 가장 마지막에 와야 합니다.
----------------------------------------------------------------------------------------
def area(width, column):
    return width*column

print area(20,column=5) # 이름과 값 전달
----------------------------------------------------------------------------------------
(실행 결과)
100
----------------------------------------------------------------------------------------

3) 가변 인수 리스트
 가변 인수는 변수 이름 앞에 *를 붙여서 사용합니다. 튜플 형태로 반환되며, 호출할 때 여러 개의 인자를 사용해도 튜플 형태로 반환해줍니다.
----------------------------------------------------------------------------------------
def var(a,*arg):
    print a,arg
    
var(1)
var(1,2)
var(5,6,7,8,9)
----------------------------------------------------------------------------------------
(실행 결과)
1 ()
1 (2,)
5 (6, 7, 8, 9)
----------------------------------------------------------------------------------------

 가변 인수를 사용하면 C언어 printf 함수와 유사하게 출력이 가능합니다.
----------------------------------------------------------------------------------------
# -*- coding: utf-8 -*-

def printf(format, *args):
    print format % args

printf("파이썬을 %d시간 공부하고, 운동을 %d분 했다.",2,30)
----------------------------------------------------------------------------------------
(실행 결과)
파이썬을 2시간 공부하고, 운동을 30분 했다.
----------------------------------------------------------------------------------------

* 출처 : 한국기술교육대학교 온라인평생교육원 파이썬프로그래밍



저작자표시 비영리

'언어 > Python' 카테고리의 다른 글

[파이썬] 람다 함수  (1) 2017.03.08
[파이썬] 디렉토리 다루기  (0) 2017.02.25
[파이썬] 파일 다루기  (0) 2017.02.24
[파이썬] 파일 입·출력  (0) 2017.02.22
[파이썬] 사전  (0) 2017.02.19

+ Recent posts

티스토리툴바