리액트 기본문법 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>
	);      
 }