리액트 기본문법 JSX, state
리액트 기본문법
- 리액트는 html 대신 jsx를 사용한다.
- class 사용 시, class 대신 className 사용
- 변수를 html에 사용하고 싶을 땐 {중괄호} - 데이터 바인딩
- html에 style속성 넣고 싶을 때는 중괄호에 {} 자료형 사용, 속성은 - 대신 모든 단어 붙여씀 (font-size → fontSize)
- return 안에는 병렬로 태그 2개 이상 기입 금지
import './App.css'; // css 연결
function App() {
let post = '강남 우동 맛집' //변수 선언
let data = 'red'
return (
<div className="App">
<div className="black-nav"> {/* class 지정(className 사용) */}
<div className={data}>블로그</div>
{/* 태그 내 인라인으로 속성 넣기 style = {{}}, html 태그 내 변수 넣기(데이터바인딩) */}
<div style={{color: 'blue', fontSize: '40px' }}>{post}</div>
</div>
</div>
);
}
export default App;
state
자료를 저장할 때는 변수 대신 state를 써도 된다.
⭐왜 변수 대신 state를 쓰는가?
: state는 변동사항이 생기면, html을 자동으로 재렌더링 해준다. (효율/편리)
: 자주 변경될 것 같은 html 부분은 state로 저장하고, html에 데이터바인딩 해준다.
1. state 만들기
- 자료 저장 시에는 useState('내용')
- 해당 자료를 사용하고 싶을 때는 let [a,b] = useState('내용')(a,b는 원하는 대로 작명가능)
- 작명은 한글도 가능하다.
- a에는 저장된 자료가, b에는 state 변경을 도와주는 함수가 들어간다.
import {useState} from 'react';
function App() {
useState('저장할 내용'); // 자료 저장
let [a,b] = useState('state사용'); //저장한 자료를 사용하려면 let [작명, 작명]
//a는 저장된 자료, b는 state 변경을 도와주는 함수이다.
return (
<div className="App">
</div>
);
}
export default App;
*destructuring(구조 할당/분해) 문법 /es6
배열과 객체를 변수로 분해할 수 있게 해주는 문법 (배열에 있던 자료들을 변수로 빼준다.)
* 참고 사이트 : https://ko.javascript.info/destructuring-assignment
let nums = [1,2,3];
//배열의 요소를 사용하려면, 배열의 인덱스로 접근한 것을 변수로 선언해줘야 함
let a = nums[0] //1;
let b = nums[1] //2;
let c = nums[2] //3;
//destructring 문법
//인덱스를 이용해 배열에 접근하지 않아도, 배열의 요소들을 변수로 사용할 수 있다.
let [a,b,c] = [1,2,3]; // a라는 변수에 1이 들어가고, b변수에는 2, c변수에는 3이 들어감
/*eslint-disable*/
js 파일 최상단에 추가 →경고메세지(에러는 신경써야 되지만, 경고는 무시 가능)의 기능을 꺼준다.
lint를 꺼준다. (ESLint : ESLint는 자바스크립트 코드에서 발견되는 문제시되는 패턴들을 식별하기 위한 정적 코드 분석 도구)
/*eslint-disable*/
/*eslint-disable*/ //경고메세지가 뜨는 eslint 기능을 꺼준다.
import './App.css';
import {useState} from 'react';
function App() {
let post = '강남 우동 맛집';
let [글제목,b] = useState(['남자코트 추천','강남 우동맛집','파이썬독학']);
return (
<div className="App">
<div className="black-nav">
<h4>ReactBlog</h4>
</div>
<div className="list">
<h4>{글제목[0]}</h4>
<p>2월 17일 발행</p>
</div>
<div className="list">
<h4>{글제목[1]}</h4>
<p>2월 17일 발행</p>
</div>
<div className="list">
<h4>{글제목[2]}</h4>
<p>2월 17일 발행</p>
</div>
</div>
);
}
export default App;
*함수 사용 + onlick 이벤트 만들기
일반 html에서는 onlick = "자바스크립트 코드" 로 이벤트를 구현한다.
<button onclick="alert('hello')">안녕<button>
- JSX에서는 onClick = {실행 함수}로 쓴다.
- onClick 내에 함수를 적어줘야 재랜더링 자체도 잘 된다.
function App() {
let [내용, b] = useState('내용');
let [좋아요, c] = useState(0);
function addGood() {
console.log(1)
}
return (
<div className="App">
<div className="black-nav">
<h4>ReactBlog</h4>
</div>
<div className="list">
<h4>{내용} <span onClick={addGood}>👍</span> {좋아요} </h4>
<h4>{내용} <span onClick={ function addGood() {console.log(1) }}>👍</span> {좋아요} </h4>
<h4>{내용} <span onClick={ () => console.log(1) }>👍</span> {좋아요} </h4>
<p>2월 17일 발행</p>
</div>
</div>
);
}
export default App;
2. state 변경하기
state는 등호를 이용해 변경하는 방식이 안되고, state 변경용 함수를 사용해야 됨
function App() {
let [내용, b] = useState('내용');
let [좋아요, 좋아요변경] = useState(0);
function addGood() {
console.log(1)
}
return (
<div className="App">
<div className="black-nav">
<h4>ReactBlog</h4>
</div>
<div className="list">
{/*이렇게 직접적으로 등호를 써서 사용하면 안됨
<h4>{내용} <span onClick={ () => {좋아요변경(좋아요 = 3)} }>👍</span> {좋아요} </h4> */}
{/* <h4>{내용} <span onClick={ () => {좋아요변경(1)} }>👍</span> {좋아요} </h4> //1로 변경 */}
<h4>{내용} <span onClick={ () => {좋아요변경(좋아요+1)} }>👍</span> {좋아요} </h4>
<p>2월 17일 발행</p>
</div>
</div>
);
}
export default App;
* state변경함수(새로운state 값)
특징 : 기존 state == 신규 state의 경우 변경 안된다. (state 변경 전 비교해본다 - 자원절약)
* reference data type
변수에 배열을 선언하면 변수 안에 배열이 담기는 게 아니라, 배열의 위치를 나타내는 화살표가 저장된다. (배열과 객체의 특징)
변수1과 변수2의 화살표가 같은 경우 변수1==변수2 비교시 true가 나온다.
let arr = [1,2,3]
//[1,2,3] 이라는 배열을 arr에 넣어주세요라는 뜻이 아니다.
//[1,2,3] 이라는 배열이 어디에 위치하는지 가르키는 화살표를 arr에 저장한 것
결국 이렇게 작성해도 변하지 않는 이유는, copy와 기존의 state가 동일하다고 판단되었기 때문
fucntion App () {
let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
//배열과 객체를 다룰 때 원본은 보존하는 게 좋다. 다른 글제목 대신 copy라는 변수를 생성
return (
<div className="App">
<button onClick = { () => {
let copy = 글제목;
copy[0] = '여자코트 추천'
글제목변경(copy);
}}> 수정버튼 </button>
</div>
);
}
결론 : state가 배열 또는 객체이면 shallow copy를 만들어서 수정해라
* spread 연산자(...)를 이용한 배열 복사
* 참고사이트 : https://velog.io/@jun094/JS-객체-배열-복사-상
fucntion App () {
let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
return (
<div className="App">
<button onClick = { () => {
let copy = [...글제목]; {/*괄호를 벗겼다 씌워주세요 → 화살표도 달라짐 */}
copy[0] = '여자코트 추천'
글제목변경(copy);
}}> 수정버튼 </button>
</div>
);
}