React - Props, DefalutProps, State, setState, 조건부 렌더링

Components 데이터

리액트 컴포넌트에서 다루는 데이터는 props와 state로 나뉩니다.

props

정의

props는 부모 컴포넌트가 자식 컴포넌트에게 넘겨주는 값입니다. 단 자식 컴포넌트에서는 props를 읽기만 할 수 있습니다. props는 함수의 매개 변수처럼 컴포넌트에 전달이 됩니다.
props의 값이 바뀌면 바뀐 부분만 리렌더링 됩니다.

테스트

부모 컴포넌트(Test)의 first와 last로 자식 컴포넌트에게 값을 넘겨주고 자식 컴포넌트(Name)는 this.props객체에 있는 first와 last 값을 읽어주었습니다.

테스트 결과

테스트

App 컴포넌트에서 A와B 컴포넌트에 각각 name='ingoo'라는 값을 전달해주고 A와B에서 각각 C와D 컴포넌트에 value와 text라고 값을 전달해주어서 C와D 컴포넌트에 각각 value와 text값을 렌더해주었습니다.

테스트 결과

defaultProps

가끔씩 실수로 props를 까먹거나 혹은 일부로 props를 일부로 비워야 할 경우에는 props의 default 값을 설정할 수 있습니다.

테스트

this.props의 값은 없지만 defaultProps로 기본값을 설정해주어서 기본값이 렌더됩니다.

테스트 결과

state

정의

함수 내에 선언된 변수처럼 컴포넌트 안에서 관리되는 데이터입니다.
변화가 필요한 경우 setState() 함수를 사용해서 데이터를 변경해줄 수 있습니다.

테스트

1. handleIncrease( ){ } 함수와 handleDecrease( ){ } 함수의 this를 사용할 수 있도록 컴포넌트 생성자에서 super(props)를 호출하여 메서드들을 바인딩 해줍니다.
   이때 화살표 함수를 사용하면 constructor()에 메서드를 바인딩 해주지 않아도 this를 사용할 수 있습니다.
2. state를 선언할때는 class fields를 사용하면 더 간단하게 정의 할 수 있습니다.
   
3. constructor(props){} 내부에서는 this.state를 직접 할당 할 수 있습니다. 이 외에의 메서드 에서는 this.setState()를 사용해야 합니다.
4. button의 onClick에 this.handleIncrease 와 this.handlDecrease 메서드를 실행될 함수로 넣어줍니다. (Babel 문법)

테스트 결과

+,- 버튼을 누를때 마다 각각 함수가 실행되어 숫자를 1씩 올리거나 내립니다.

setState()

정의

setState()는 state 객체에 값을 변겅할 수 있으며 state값이 변경되면 컴포넌트는 리렌더링이 됩니다. setState의 작동 방식은 비동기입니다.

테스트

아래같은 코드를 해석해보았을때 버튼을 클릭할 경우 click 메서드가 실행되어 count가 count + 1 + 2 + 3이 될거라고 생각을 하였습니다.

테스트 결과

하지만 테스트 결과를 보면 count는 3밖에 올라가지 않았습니다.
왜냐하면 setState( ) 메서드가 비동기로 작동하기 때문인데 setState( ) 메서드를 이벤트 핸들러 안에서 호출한다면 호출되는 setState에 의해서 업데이트가 요청되는 count의 값은 즉각적으로 반영되지 않고 이벤트 핸들러가 종료되고 react에 의해서 효율적으로 상태가 갱신되기 때문입니다.
다시말해 add(1)의 count는 state의 count로 0이고 add(2)의 count도 0 add(3)의 count도 0이라는 말입니다.

결론 : react에서 setState( )가 연속적으로 호출되면 비교하고 반영하는 번거러운 작업을 merging 하여 한번에 setState( )를 처리하기 때문에 click안에 모든 메서드를 실행하기는 하지만 마지막 add(3)만 처리가 되는것 처럼 보이는것입니다.

• 버튼 클릭전

  

• 버튼 클릭후

조건부 렌더링

if나 조건부 연산자를 사용하여 상태에 따라 컴포넌트를 다르게 렌더링 할 수 있습니다.

테스트

로그인 버튼을 만들어 state의 isLogin 값이 ture일경우에는 로그인이란 버튼이 렌더링되고 false인 경우에는 로그아웃이라는 버튼이 렌더링 됩니다.
버튼을 클릭할경우 Login 메서드가 실행되 state의 isLogin값을 setState( )로 반대로 바꿔줍니다.

• 또한 화살표 함수를 사용하여 컴포넌트 생성에서 super(props)를 호출하여 함수를 바인딩하지 않아도 this를 사용할 수 있습니다.
  

테스트 결과

버튼 미클릭시 ( isLogin값이 true일 경우 )

버튼 클릭시 ( isLogin값이 false일 경우 )