[넷플] React 1. STATE

1. STATE란

1. 동적인 값. react에서 데이터를 담는 곳

2. useState 사용하기

1. useState == addEventListener / onClick + ReactDOM.render
   • 새 상수 선언 :  const data = React.useState();  
   • -> data = [ undefined , f ]  즉  [초기값, 값을 변경시키는 setter 함수] 총 2개의 value가 들어있는 array가 반환됨.
   • 보통 이름을  [ value , setValue ]  처럼 지음. 언제나 값과 그것을 변화시키는 함수의 관계이기 때문. setValue의 인자로 넣은 것이 새로운 value의 값이 됨.
     •  동적인 값 덮어씌우기 (직접할당)
       • string이든 num이든 계산식이든 괄호 안에 넣은 값이 value에 덮어씌워진다.
       • setCounter(counter + 1); 을 넣으면 counter = counter+1 ; 과 같은 의미.
     • 값 업데이트할 함수를 할당하기
       • 반드시 현재 value를 바탕으로 다음 value를 넣고 싶을 때는 직접 할당하지 말고 함수를 할당.
         why? useState()가 만들어진 뒤 ~ setCounter() 실행 전 단계에서 예상치 못한 다른 코드가 끼어들어 value값을 'newValue'로 바꿨다면, setCounter(직접할당)는 newValue를 인식하지 못하고 value +1을 실행하게 됨. 반면 setCounter(함수할당)은 react가 언제나 '현재 값'을 찾아 +1을 해 줌.
       • setCounter( (counter) => counter + 1);
   • setter가 실행된 후 자동으로 새 값을 가지고 rerender(=refresh = recreate)됨
   • 활용 : 다른 함수의 내부에 넣은 뒤, 외부에서 받은 인자(함수)대로 동작하게 만들 수 있음. 
2. 팁 - 배열 순서별 이름 붙이기 (구조분해할당? 비구조화할당?)
   1. 배열이 하나 있다고 할 때  const x = [1, 2, 3]; 
   2. 좌변의 변수 이름 붙이는 자리를 배열처럼 적어넣고 우변에 배열이름을 넣으면 const [a, b, c] = x ; 
   3. a, b, c 는 각각 x[0], x[1], x[2]에 순서대로 대응하게 된다! b == x[1]
   4. 위의 예에 적용시키면, 처음 선언할 때부터 const [value, setValue] = useState( 0 ); 으로 적을 수 있음.

3. Input and State

1. entity 충돌
   • react가 html 문법을 거의 고대로 사용할 수 있지만, js 기반인만큼 entity를 건들면 'invalid DOM' 오류가 난다!
   • class -> className, (label에서) for -> htmlFor 바꿔 적어야 정상 작동
2. input의 현재 입력값 value 추적하기
   
   1. 데이터 받을 state 선언 const [data, setData] = React.useState()
   2. <input> 입력창에 변화가 생길 때마다 onChange( )라는 이벤트핸들러 실행
   3. onChange(event)에서 setMinutes(즉 minutes)를 현재 입력된 value로 업데이트
   4. 업데이트된 minutes 값이 <input>의 value라는 속성의 속성값으로 들어감 -> 이제 외부에서도 input값을 조작할 수 있음!
      • *input 속성을 업데이트하는 것(onChange)이 없으면 input창에 무슨 값을 입력하려고 해도 변하지 않음

4. State Practice

1. [ inverted, setInverted ]를 담은 state와(초기값 : false) 그것을 반대로 바꾸는 핸들러 onInvert 만듦.
2. "분->시간" 변환이 아니라 "시간->분"으로 invert 하면서 기능이 변화해야 하는 부분에 활용.
3. boolean이 필요한 곳에는 inverted 또는 ! inverted 
4. if 조건을 넣어야 하는 곳에는 삼항연산자

비슷한 방식으로 화면에 표시할 function을 사용자 선택에 따라 바꿀 수 있음.

html의 <select>이용해서 value를 받은 뒤, {  } 안에 js 코드 넣어서 조건에 맞는 function을 화면에 표시.

 

**핵심 : state가 바뀌면 rerender된다!!**

---

* useState 부분 들을 때 강의만으로는 긴가민가한 부분이 있어서 웹문서 참조함. 캬 파악하는 데 오래 걸렸다!

* 댓글에 있던 추가정보 : 직접할당은 여러 번 적어도 '덮어쓰기' 때문에 +1 만 되고, 함수할당은 적은 수 만큼 '변경'되기 때문에 +1+1+1+1... 이 된다!

* 이벤트핸들러에 event 인자 넣었을 때 나오는 SyntheticEvent(모든 브라우저에서 이벤트를 동일하게 처리하기 위한 이벤트 래퍼) 자세한 설명 : https://abangpa1ace.tistory.com/m/129