- React를 배워야하는 이유
1. 가장 많은 사용자 수
2. 하나를 배우면 웹, 안드로이드, IOS, 데스크톱을 동시에!
React(웹을 만드는 도구)와 React-Native(앱을 만드는 도구)는 굉장히 비슷!!!
따라서, React를 공부하면 React-Native는 1달 이내에 어느정도 자연스럽게 할 수 있게 됩니다.(솔깃하다)
React-Native는**크로스 플랫폼**으로 하나를 만들어서 안드로이드, IOS 두 곳에 모두 배포 가능
다시말해, React 하나를 잘하면웹, 안드로이드, IOS, 데스크톱!모두 만들 수 있습니다.아래는 React와 React-Native로 만들어진 서비스입니다.
- React 컴포넌트
컴포넌트는 복사 / 붙여넣기와는 다르다!!_
클래스형 컴포넌트 vs 함수형 컴포넌트
React에서 컴포넌트 작성 방법은 2가지! 함수형이 더 간단해 보입니다!
<최근에는 많은 기업이 함수형 컴포넌트를 주로 사용!!>
화살표 함수로도 적용 가능합니다.
하지만, 함수형 컴포넌트 그 자체만으로는 클래스형 컴포넌트의 모든 기능을 흉내낼 수 없기에, Hooks(훅)이라는 도구를 만들었습니다.
훅이란? 함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능을 사용 가능하도록 만들어준 도구대표적인 Hooks 에는
useState,useEffect가 있습니다.
state 친구들 (state, setState, useState)
state란 리액트 컴포넌트에서 데이터를 담기 위한 상자입니다.
우리는 자바스크립트에서 데이터를 담기 위한 상자로변수를 배웠습니다.
다시 말해,state는 컴포넌트에서 사용하는 변수입니다.- state: 컴포넌트에서 사용하는 변수
- setState: 컴포넌트에서 사용하는 변수를 바꿔주는 기능
- useState: 컴포넌트에서 사용하는 변수를 만들어주는 기능
<솔직히 설명만 읽어서는 이해가 어려웠습니다 state 개념을 헷갈려서 오늘 과제에서도 엄청 헤맸다는 것은 안비밀입니다>
1. 리액트 컴포넌트에서 변수 만들고, 바꾸기
그렇다면 예제를 사용하여 보면 어떨까요?
2. 리액트에서 let을 안쓰고 state를 변수로 사용하는 이유
자바스크립트에서 let을 사용하여 변수를 만드는 것과 리액트 컴포넌트에서 state를 사용하여 변수를 만드는 것은 매우 흡사해보입니다.
그래서 흡사하다면 더 쉬운 let을 사용하면 되지 않을까? 라는 생각을 했습니다.하지만 리액트 컴포넌트는 앞쪽에 화면에 보여지는 부분과 뒷쪽에 데어터를 관리하는 부분으로 나눌 수 있습니다.
만약, 단순히
자바스크립트 변수 let(또는 상수 const) 를 사용해서 좋아요를 화면에 그렸다면, 좋아요가 증가해서 17로 변경되었을 때,뒷쪽의 데이터 부분만 변경되고, 앞쪽 화면에는 반영이 되지 않습니다.
<<우리가 개발자 도구에서 자바스크립트로 아무리 선언을 해도 화면엔 띄워지지 않는 것과 비슷하달까요?>>하지만,
컴포넌트 변수 state를 사용해서 화면에 그리고,setState()를 사용해서 좋아요를 변경하면,setState() 안에서 화면을 새롭게 그리라는 명령이 실행되어 변경된 데이터가 화면에 새로 그려집니다.
<<따라서 저는 화면에 나타나지 않는 변수(자바스크립트)를 state라는 (앞쪽 화면에 보여질 수 있게 하는 규칙을 가진)상자에 담아 화면에 그리는 것이라고 일단 이해했습니다>>
