React와 친해지기
리액트… 너 뭐 돼?
자바스크립트를 쉽게 이용하기 위한 라이브러리와 프레임워크는 여러가지가 있다. 대표적으론 vue, angular, react가 있다. 나는 앞으로 react를 배우게 될텐데... 그렇다면 왜 React일까?
- 가장 많은 이용자
- 웹, 앱, PC앱 개발 가능
- 리액트를 기반으로 한 프로그램 다수
ex. 페이스북, 인스타, 트위터, 넷플릭스 등등
가장 큰 장점은 아무래도 이용자가 많으니 커뮤니티가 활발하게 활성화 되어있고, 그렇기 때문에 react와 관련된 정보 또한 많이 축적되어있다는 점!
COMPONENT 라고 들어는 봤니
component는 문서(html), 스타일(css), 동작(js) 들을 합쳐서 만드는 태그라고 볼 수 있다. 쉽게 말해 react는 부품을 가져다 조립하는 컴포넌트 기반의 개발 방식이다. 하나의 컴포넌트를 만들어두면 export와 import를 통해 여러번 반복해서 사용할 수 있다.
그게 복붙이랑 뭐가 다른데?
굳이 변수에 할당하지 않고 코드 전체를 복붙하는 거랑 똑같지 않아? 하는 질문이 생길 수도 있다. 복붙과 컴포넌트의 가장 큰 차이는 수정 할 때 나타난다.
만일 복붙한 코드를 수정해야 한다면 붙여넣은 코드들을 모두 찾아 수정해줘야 하지만 컴포넌트의 경우 원본 하나만 수정하면 끝!
클래스형 컴포넌트 vs 함수형 컴포넌트
React-Hooks 출시 전에는 클래스형과 함수형을 구분해서 써줘야했다. 현재 클래스형 컴포넌트는 defrecated(더 이상 지원하지 않는 상태) 라고... 하지만 이전에 클래스형 컴포넌트를 이용해 만들어진 것들이 있기 때문에 배워둬야 한다. (to be continued...)
useState...?
가 뭐냐면, React-Hooks 중 하나로 컴포넌트의 전용 변수이다.
const [ count, setCount ] = useState(0)
// 순서대로 [ 변수명, 변수바꾸기 ] = 변수만들기(초기값)
// useState는 고정이다변수면 let 이랑 다를게 뭐야?
let은 화면에 출력되지 않는다. let 에 할당한 변수의 값이 아무리 변화해도 console 에만 찍힐 뿐... 하지만 useState는 다르다. 값이 바뀔 때마다 화면을 새로 렌더링 해주는 아주 좋은 친구😃
그밖에 오늘 쫌쫌따리 들은 것들
변수가 반영되는 범위를 scope 이라고 한다.
해당하는 값을 찾기 위해 위로(안에서 밖으로) 올라가는 걸 scope chain 이라고 부른다.
react 에서는 return 안의 내용을 div 태그로 묶어주어야 한다.
velog 글씨 색깔 바꾸는 법은 알았는데 소스 코드에는 안 되나보다... 슬퍼...
