리액트를 사용하는 이유
리액트는 SPA(Single Page Application)을 만들때 사용한다. Vibe, Instagram처럼 페이지 전환 같은게
새로고침 없이 부드럽게 동작하는데 리액트로 개발해서 그렇다.
이런 사이트들을 SPA라고 하는데 html 파일을 1개만 사용하고, 다른 페이지를 보여주고 싶을 때는 html 부분만
갈아치워서 보여준다. 대표적으로 아래와 같은 특징이 있다.
- html을 함수, 배열, 오브젝트 이런 곳에 보관하고 '재사용'할 수 있어서 큰 프로젝트 규모일 수록 html 관리가 편하다.
- 같은 리액트 문법으로 React Native을 써서 앱 개발도 가능함(html css 문법만 약간 다름)
리액트에서 레이아웃 만들 때 쓰는 JSX 문법 3개
1)html에 class 넣을 때는 className을 사용해야한다.
작업하는 App.js는 실질적으로 html이 아닌 JSX다. JSX는 일종의 JS라서 JS에서 사용하는 예약어인 class라는
키워드와 겹치기 때문에 className을 사용하여야한다.
2)변수를 html에 삽입할 때는 {중괄호}를 사용하면 된다.
자바스크립트 문법만을 사용한다면 불편하게 document.getElementById().innerHTML = 변수 이런식이였지만
리액트에서는 중괄호로 간단하게 변수를 할 수 있다.변수에 있는 걸 html에 삽입하는 과정을 ⭐️데이터바인딩이라고 한다.
`function App(){
let post = '수원 맛집';
return (
<div className="App">
<div className="black-nav">
<div>블로그임</div>
<div>{ post }</div>
</div>
</div> )
}`
3)html에 style 속성을 넣고 싶다면 JSX문법에서는 아래와 같이 해야한다.
//기존 html/css
<div style = "color : blue">
//JSX에서는
<div style={ {color : 'blue', fontSize : '30px'} }> 글씨 </div>변수말고 State를 쓰는 이유가 뭔가요?
state 용도는 변수와 같이 잠깐 자료를 보관하는 용도입니다. 그러나 변수와 달리 state는 변동사항이 생기면
state를 쓰는 html도 자동으로 렌더링 해줍니다.
만약 a라는 변수에 a = '스파르타' 가 있는데 이걸 a = '항해99'로 바꿨습니다.
그리고 html에도 반영되게 하고 싶습니다. 근데 이걸 바닐라 자바스크립트에서 코드로 구현하면 매우 번거롭습니다.
state는 그럴 필요 없이 포함된 html을 자동으로 재렌더링 해줍니다.
일반적으로 state는 상품명, 글제목이나 가격 같이 자주 변할 것 같은 데이터들을 저장합니다.
state함수에 state를 넣었는데 동작이 되지 않습니다.
state를 변경해주는 함수는 일단 기존state와 신규 state를 검사합니다.
만약 동일한 경우 변경을 해주지 않습니다. JS에서 array / object에서 자료를 아래처럼 복사하면
let data = [1,2,3];
let data2 = data;둘은 같은 값을 공유합니다. 근데 data와 data2는 똑같은 화살표를 가리키는겁니다.
그래서 같은 화살표를 가지고 있는 애들끼리 등호로 비교를 해도 똑같다고 나오는겁니다.
자세한건 레퍼런스 데이터 타입을 찾아보면 됩니다.
간단하게 spread operator를 사용해서 깊은 복사를 해주면 됩니다. 그러면 독립적인 복사본을 생성해줄 수 있어요
let data = [1,2,3];
let data2 = [...data];이러면 값을 가리키는 화살표가 달라집니다.
JSX중괄호에서 for 반복문을 사용할 수가 없습니다.
안타깝게도 for문은 JSX 중괄호 안에서 사용할 수 없습니다. 대신 map()함수를 사용할 수 있습니다.
let arr = [2,3,4];
arr.map(function(){
console.log(1)
});
기능 1. array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행해줍니다.
저러면 진짜로 console.log(1) 3번 실행됨
let arr = [2,3,4];
arr.map(function(a){
console.log(a)
});
기능 2. 콜백함수에 파라미터 아무렇게나 작명하면
그 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력해줍니다.
(그냥 소괄호안에 있는 함수를 콜백함수라고 합니다)
저러면 진짜로 2, 3, 4가 콘솔창에 출력됨
let arr = [2,3,4];
let newArray = arr.map(function(a){
return a * 10
});
console.log(newArray)
기능3. return 오른쪽에 뭐 적으면 array로 담아줍니다.
그리고 map() 쓴 자리에 남겨줍니다.
그래서 변수에 담아서 출력해봤더니 진짜로 array에 담아주긴 하는군요
newArray는 [20, 30, 40] 이 출력됩니다.