Ref

• 자바스크립트의 돔요소를 끌어오는데에는 getElementsBy로 끌어오면 되는데, 자바스크립트는 진짜 돔요소를 건드린다.
• 하지만 리액트는 가짜돔을 건드리는데 어떻게 끌어오지??

1. Ref로 돔요소 끌어오기!

< ref 사용방법 >

• 클래스형 컴포넌트

1. 끌어올 돔요소(사실은 리액트 요소)를 만들어줍니다.
2. constructor에 ref 상태를 추가해준다.
   -> this.state = React.createRef() 를 추가.
3. 끌어올 돔요소에 ref를 추가해준다.
   -> ref = {this.state}

• 함수형 컴포넌트

1. 순서는 클래스형 컴포넌트와 같다.
2. 함수형 컴포넌트에서는 라이프사이클 메소드를 사용할 수 없으므로, 리액트 훅을 이용해서 re의 초기값을 추가해준다.
   -> const something = React.useRef(초기값 설정)
3. 끌어올 돔요소에 ref를 추가해줄 때 ref = {something} 로 적어줘야 한다.

2. 끌어온 돔요소의 인풋값을 끌어오고 싶어!

• something.value 또는 this.state.value로 끌어온다.
  (ref의 value를 끌어온다고 보면 됨)

State 관리

• 컴포넌트를 만드는 순서에 유의하면서 관리하면 된다.

1. 단방향 데이터 흐름을 사용하는게 좋다.

• 단방향 데이터 흐름 : 데이터를 부모 컴포넌트에서 자식 컴포넌트로 넘겨주는 형식.
• 단방향 데이터 흐름이 아닐경우 업데이트 무한루프에 빠질 수 있다.(라이프 사이믈의 업데이트 경우와 상관이 있다.)

2. 클래스형 컴포넌트에서의 state관리

• this.setState() 이용

 addNemo = () =>{
    // state가 어떤 형태인지 파악하고 똑같은 형태로 바꿔줘야한다.
       (프로젝트에선 딕셔너리)
    this.setState({count : this.state.count + 1});
  }
  ----------------->
  // this.setState() 사용
  // count가 원래 state 
  // this.state.count + 1   -> state 상태 변화

3. 함수형 컴포넌트에서의 state관리

• 리액트 훅 이용

1. 초기값 설정하기(리액트 훅 이용)
   const [ state , setState] = React.useState(초기값 설정);
   • setState에는 state의 상태를 변화시켜줄 함수가 들어간다.
2. 변경이 필요한 state값에 setSate()를 이용해서 변경해준다.

   const addNemo = () => {
          setCount(count + 1);
      }
   ------------------>
   // setCount() 사용
   // count가 원래 상태값
   //class형 컴포넌트에서는 addNemo를 선언하지 않고 사용이 가능한데 함수형 컴포넌트에서는 무조건 다 선언해줘야 한다.

• 곁다리로 끼워가는 개념
  1. onClick 사용법 두가지
  • onClick = { () => {} } : 실행할 함수 바로 적기
  • onClick = {(this.)함수} : 실행할 함수 위에 적어주고 호출해오기
    (this.)은 클래스형 컴포넌트일때만 사용
  2. 가상돔과 진짜돔을 비교하기위한 값이 바로 key이다.
     key값은 자동으로 랜덤생성된다.