Component , state, props

🔹 Component

• 리액트로 만들어진 앱을 이루는 최소한의 단위이다.
• 컴포넌트는 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다.
• 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수이다.
• 컴포넌트 이름은 항상 대문자로 시작하자!(소문자로 시작하는 컴포넌트를 DOM태그로 취급한다)
• React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야한다.

🔹 함수형 컴포넌트

• 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것 이다.

import React from 'react';

export default function Hello(props){
		return <div>Hello, {props.name}</div>;
}
 

• 위 함수는 데이터를 가진 하나의 props 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트이다.

🔹 클래스 컴포넌트

class Welcome extends React.Component {
   render(){
   	return <h1>Hello, {this.props.name}</h1>
    }
 }

• React 관점에서 볼 때는 두 가지 유형의 컴포넌트는 동일하다.

🔹 State

• state는 컴포넌트 자기 자신이 가지고 있는 값이다. 변화가 필요할 경우 setState() 함수를 통해 값을 변경해줄 수 있다.
• React는 성능을 위해 setState() 호출을 단일 업데이트로 한꺼번에 처리할 수 있다.
• setState()는 컴포넌트의 re-rendering을 발생 시킨다.
• 컴포넌트가 상태를 관리하면 상태값 변경이 가능하고 변경하면 컴포넌트가 렌더링을 할 수 있다.
• Hook 함수 {useState} => 배열을 return 그 배열에는 두가지 값이 있다.
• [state, setState] => [값, 값을 변경할 때 쓰는 함수]
• setState는 비동기적으로 실행된다.
  
  ⚠️ multiplyBy2AndAddBy1 부분이 구현이 안된다. 그 이유는 비동기적으로 실행되기 때문이다.
  이 문제를 해결하기 위해서는 setState에 함수로 넘겨주면 된다.
  

❗️ 불변성(immutable)

• 불변성은 어떤 값을 직접적으로 변경하지 않고 새로운 값을 만들어내는 것이다.
• 프로그래밍에서 불변성을 지킨다 -> 메모리 영역의 값을 직접적으로 변경하지 않는다.
• 불변성을 지키지 않고, 메모리 영역의 값을 직접 변경하면 리액트는 state가 바뀌었다고 인지하지 못한다. 그 이유는 리액트는 이전 state와 이후 state를 비교할 때, 얕은 비교(shallow Compare)를 하기 때문이다.
• setState()를 이용할 때 원시타입의 경우에는 값을 바로 넣어줘도 되지만
  참조타입의 경우에는 새로운 객체나 배열을 생성한 후 값을 넣어주어야 한다. map,filter,slice,reduce와 같이 새로운 배열을 반환하는 메소드를 이용하자

원시타입	참조타입
boolean,number,string	Object
불변성 O	불변성 X
변수에 값을 할당하면 메모리에 값 자체가 저장된다.	변수에 값을 할당하면 메모리 값이 담긴 주소가 저장된다.

ex)

🔸 원시 타입 state 다루기

🔹 참조 타입 state 다루기

import React, {useState} from “react”;
const [array,setArray] = useState([“a”,”b”,”c”,”d”])

array[0] = “e”
const newArray = array
ex) setArray = (newArray)
	<잘못된 사용법>

ex) setArray([…array, newItem])   
ex) setArray(array.filter(arr => {})  
	<올바른 사용법>

🔹 props

• 프로퍼티, porperties의 줄임말 이라고한다.
• 상위 컴포넌트가 하위 컴포턴트에 값을 전달할 때 사용한다.(단방향 데이터 흐름)
• 값을 변경 할 수 없다 (자식 컴포넌트 입장에선 읽기 전용 데이터이다.)
• 문자열은 ""를 사용하고 문자열 이외에는 {}를 이용한다
• 아무 값도 넘기지 않을대 defalult 값은 true이다.
  
  
  ex) App.js가 상위 컴포넌트 Name.js가 하위 컴포넌트
  
  App.jsName.js
  output
  

---

props vs state

props	state
부모 컴포넌트가 자식 컴포넌트에 전달 하는 값	자신이 스스로 관리하는 상태값
값을 자신이 변경할 수 없다.	값을 자신이 변경할 수 있다 setState()
컴포넌트 렌더링 발생	컴포넌트 렌더링 발생

State 끌어 올리기

• 리액트의 데이터는 아래로 흐른다(하향식 or 단방향식) 데이터 흐름
• 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 때 가까운 공통 조상으로 state를 끌어 올리는것이 좋다.(단일 진실 공급원(single source of truth))