두 번째 날 :)

첫날 공부한 내용을 복습하고 잤는데.. 정확하게 3시간 자고 두 번째 날이 와버렸다.

피곤에 찌든 상태였지만, 이왕 시작해버린 공부 제대로 하자는 마음가짐으로 자리에 앉았다.

두 번째 날의 시작은 우리는 왜 리액트를 배워야 하는가 부터 시작했다.

보다시피 답은 간단했다. '리액트를 제일 많이 사용하니까.'

방금 언급한 것이 제일 큰 이유이긴 하겠지만, 추가로 React는 웹(Web)을 만드는 도구라면, 앱(App)을 만드는 도구로는 React-Native가 있는데, React에 숙달 되면 자연스레 React-Native도 1달 이내의 기간으로 숙달할 수있어 웹, 앱, IOS, 데스크톱 버전을 모두 만들 수 있다는 장점이 있었다.

배워야 되는 이유에 대하여는 이 정도이고, 슬슬 본격적인 수업에 들어갔다.

React Component

컴포넌트란 UI의 기능을 부품화 해서 재활용 할 수 있게 하는 것이다.

그림을 보면 '부품화' 라는 말이 이해가 될 것이다. 말그대로 완제품하나를 작은 부품으로 쪼개서 다른 제품에도 끼워넣을 수 있게 하는 것. 이라고 생각하면 될 것 같다.

이렇게 만들면, 같은 UI로 안에 들어가는 데이터와 이미지 등만 바꿔주면 다시 새롭게 활용 할 수 있다.(뼈대는 같은데 살만 다르게 붙히면 된다)

복사, 붙혀넣기(crtl+c, crtl + v)와 다른점이라고 한다면, 복,붙은 한 개체 한 개체 일일히 고쳐야 하는 반면, 컴포넌트는 원본만 조정해주면 나머지가 알아서 바뀐다는 것이다. (써놓고보니 큰 차이이긴 하다.)

컴포넌트에도 종류가 있는데, 아래와 같다.

..딱봐도 함수형이 더 간단해 보인다,,,,
클래스형은 갖다 버리도록하자.
하지만 기존에 이미 만들어진 서비스들은 클래스형 컴포넌트도 있으니 클래스형 컴포넌트도 알아둬야 할 필요성이 있다고 한다. 유념하도록하자..

State

우린 어떠한 값을 담기 위해 변수라는 것을 사용했다 예를 들면 이런 것들말이다.

let i = 120;
const arr = [1, 2, 3];

이미 알다시피 변수의 선언 방법의 차이가 있지만, i와 arr 라는 변수에 각각 Number형 변수와 Array형(정확히는 배열도 Object(객체)형이다. 일단은 배열 이라고 하자)변수를 할당 해준 것이다.

알던 사실과는 약간 다르게, 컴포넌트에서는 변수로 State를 사용한다. 잠시 짚고 넘어가도록 해보자.

• state : 컴포넌트에서 사용하는 변수.
• setState : 컴포넌트에서 사용하는 변수(state)를 바꿔주는 기능
• useState : 컴포넌트에서 사용하는 변수(State)를 만들어주는 기능

ex)

const [name, setName] = useState(초기값)

...;;

뭐이렇게 복잡하게 변수를 선언하지,, 그냥 let, const 쓰면 안됄까요..(응 안돼)

왜 안돼는가.. 에 대해서 이해가 잘 되지 않아서 구글링을 시도해봤다..

예시를 들어보자

function App() {
  let count = 0;
  const increase = () => {
    count = count++
  }
  return (
    <main>
      <div>0</div>
      <button onClick={increase}>누르면 숫자가 올라감</button>
    </main>
  );
}

버튼을 누르면 count 변수가 1씩 늘어나는 간단한 페이지이다. 예시를 든다라는 시점부터 눈치 챘겠지만, 당연히 div 태그안에 있는 0은 1로 올라가지 않는다,,(그랬으면 state 안쓰겠지..)

근데.. 혹시나 정말 작동하지 않는건가 싶어 코드에 console.log(count)를 입력하고 콘솔창을 확인하면...

...?

잘올라간다.. 무슨상황일까..

결론부터 얘기하자면 onClick 함수를 실행할때마다 count라는 변수가 바뀐 UI를 업데이트 해줘야되는데 그게 안되는거다..

예시에서는 변수가 하나였지만 실제 실무에서 사용되는 변수가 몇개일까.. (딱히 생각하고 싶진 않은 양이다) 이렇게 많은 변수가 하나하나 바뀔 때 마다 UI를 업데이트 할순 없으니 여기서 State라는 개념이 나온 것이라고 한다. 정리하자면 단순히 잠깐 값을 들고있는 변수말고 state라는 친구의 값이 바뀌면 UI를 랜더링 하게끔 만들었다고 한다. (이해할수 있는 수준이 여기까지)

두 번째날 후기

첫 날에도 느낀 점이지만 내가(그나마)아는 수준의 지식은 아기들 뒤짚기 정도..? 라는 것..