오혜준의 개발 블로그

let [title, setTitle] = useState( ['강남 맛집', '강북 맛집', '강동 맛집'] );

제목이라는 배열의 state가 있다

제목 변경을 클릭해서 배열의 첫번째인 강남 맛집을 변경한다고 보면

<h4 onClick={ () => { setTitle(['강서 맛집', '강북 맛집', '강동 맛집']) } }>제목변경</h4>

이런 식으로 변경할 수 있다

+ setTitle('강서 맛집') 은 안된다 3개 전부 적용시키던 배열들을 강서 맛집 하나로 전부 넣는다는 꼴

변경함수라는게 아예 useState를 갈아치운다고 생각하면 된다

하지만 위에 배열들을 전부 넣는것도 확장성이 부족한 잘못된 코드

<button onClick={ () => { 
    let copy = title;
    copy[0] = '강서 맛집';
    setTitle(copy)
   } }>제목변경</button>

이렇게 카피본을 만들고 카피본의 데이터를 바꾸고 적용시키는게 원본을 해치지 않는 좋은 코드이다

하지만 여기서도 제목변경을 누른다고 제목이 변경되지 않는다

<button onClick={ () => { 
    let copy = [...title];
    copy[0] = '강서 맛집';
    setTitle(copy)
   } }>제목변경</button>

이렇게 [...변수명] 으로 카피를 해줘야 한다

그 이유는 기존의 값과 새로운 값의 차이가 없을 경우 랜더링을 다시 안해준다

자세하게는

배열이나 객체를 생성시 램에 저장이 되고 배열과 객체를 가리키는 화살표만 담겨있다

배열을 그대로 복사한다는것은 그 화살표까지 가져와서 복사한다 똑같이

하지만 ... ( spread operator 문법 )을 사용하면 배열이나 객체의 내용을 개별 요소로 펼친다는 개념이다

그러므로 아예 새로운 배열이 생기게되고 그 값을 바꿔서 변경함수의 넣을 시 두 값이 다르기 때문에자동으로 재랜더링을 해준다

+ 가나다 순 정렬 버튼

<button
    onClick={ ()=>{
      let copy = [...title];
      copy.sort();
      setTitle(copy)
    }} >가나다 순 정렬</button>

데이터를 저장하는 함수,

변수하고 비슷하지만 변수는 값을 바꿀시 새로고침을 해줘야하지만

useState는 자동으로 재렌더링을 해준다

 let [변수명, 변경함수] = useState('변수');
  return (
    <div className="App">
      <div style={ { fontSize: '40px' } }> { 변수명 } </div>

+ 블로그 로그같은 경우는 변경할 필요가 없는 변수이기때문에 따로 uesState를 사용하지 않아도 된다

클릭하는 함수 사용할 시

onClick = { 실행할 함수 }

좋아요가 눌리는 이모티콘 구현

let [like, setLike] = useState(0);

눌릴때 마다 올라가는 숫자가 보여줘야하기 때문에 useState에 담는다

like 변수명, setLike 변경시 사용하는 함수

<h4> 좋아요 <span onClick={ () => { setLike(like+1) } }>👍</span> { like } </h4>

node.js 설치,

Visual Studio Code 설치

자신이 리액트 프로젝트로 만들 폴더 생성후

마우스 우클릭 - 여기에 PowerShell 창 열기

터미널이 나온다

npx create-react-app 프로젝트명(이 곳은 자신이 사용할 프로젝트명)

그 후 vscode에서 오픈 파일로 부르면 끝

미리보기는 터미널에 npm start

터미널이 나와있지 않은 상태라면 터미널 - 새 터미널

++

JSX 문법 3가지

자바스크립트 예약어인 class는 사용하지않고

html에 class는 className으로 넣는다

<div className='top_nav'></div>

{} 중괄호를 사용해 변수를 데이터 바인딩 가능

import './App.css';

function App() {
  let data = 'hello';
  return (
    <div className="App">
      <div className={ data }> { data } </div>
    </div>
  );
}

export default App;

html에 style 속성 넣기

style= { { 속성 : '속성값' } }

<div style={ { fontSize: '40px' } }> { data } </div>