리액트 useState문법 쓰는이유

리액트의 useState를 쓰는 이유와 함께 자동랜더링해서 완성하는 법을 알아보도록 합시다.

 

 jsx 문법

자바스크립트 안에 html 언어를 넣는 것을 jsx라고 생각하면 됨.

 쓰는 이유 

쉽고 간단하게 토드를 짜기 위해

 

 class가 아닌 className

html에서는 clas=""를 사용했지만 jsx에서는 className이라고 사용해줘야합니다. 중간에 대문자를 조심해야 합니다.

 

한가지 더

<link rel="stylesheet" href="./style.css">가 아닌 맨 상단에 import './style.css';로 연결해줘야합니다.

 

 

  변수와 데이터 바인딩

변수란 자료를 잠깐 저장해주는 집이라고 생각하면 됩니다.

데이터 바인딩은 useState를 말합니다.

useState는 아래에서 더 자세하게 알려드리겠습니다.

 

변수 사용법

function App() {
    const name = "이름";  //요기가 변수 잠깐 저장하기
    
  return (
    <div className="App">
        <div className='nav'>
            <h4>{name}</h4> //저장한 변수 불러오기
        </div>
    </div>
  );
}

변수를 불러 올때는 {}를 잊으면 안됩니다.

해당 변수의 값을 지금 상상하시는 곳 모든 곳에 넣어 줄 수 있습니다.

<div id={name}></div>

<div class={name}></div>

<img src={name} />

 

변수와 데이터 바인딩 차이점

변수와 데이터 바인딩의 차이점은 변수는 값이 변경되었을 때 자동으로 html 반영인 안되고 데이터 바인딩은 값이 변경되면 자동으로 html이 렌더링되어 수정이 됩니다. 그러니깐 막노동하기 싫으시면 데이터 바인딩을 사용하시는게 좋을 겁니다.

 

 

 css파일 사용하지 않고 바로 style 넣을때

 

function App() {
    const name = "이름";
  return (
    <div className="App">
        <div className='nav'>
            <h4>블로그임</h4>
        </div>
            <p style={{color: '#fff', fontSize: '19px'}}>{name}</p> //요렇게 사용해주기
    </div>
  );
}

 

 리액트 사용시 주의 점

function App() {
    const name = "이름";
    
  return (
    <div className="App">
        <div className='nav'>
            <h4>{name}</h4>
        </div>
    </div>
  );
}



잘못된 사용 법
function App() {
    const name = "이름";
    
  return (
    <div className="App">
        <div className='nav'>
            <h4>{name}</h4>
        </div>
    </div>
    <div>
    	어쩌구 저쩌구
    </div>
  );
}

위의 설명 처럼 return() 안에는 하나의 div만 있어야합니다.

return(<div>요기 안에 모두 작성하기</div>)

 

return(</div>요기작성</div><div>요기두 작성</div>)

이렇게 두개의 div가 있으면 안됩니다. 이렇게 사용하고 싶다면 이 두개의 div 밖에 div하나로 또 감싸주셔서 사용하면됩니다. 이유가 궁금하시면 구글링하시는 걸 추천드립니다.

 

 

 onClick

onClick은 해당 코드를 클릭했을 때 실행되는 클릭이벤트라고 생각하시면 됩니다.

<span onClick={함수}>눌러줘</span>

onClick안에는 함수가 들어가야합니다.

html에서는 onclick이지만 여기서는 onClick이라는 점 다시한번 기억하시기를 바랍니다.

리액트는 모두 jsx 문법이기때문에 -를 빼기로 인식하기때문에 모두 낙타문법으로 사용하시기를 바랍니다.

 

낙타문법은 중간의 단어 한개를 대문자로 넣어주는 방식을 말합니다. html에서 - 바로 뒤에 오는 알파벳을 대문자로 써주시면 됩니다.

 

 useState

useState를 사용하려면 상단에 css를 연결한 것처럼 import {useState} from 'react';가 있어야 사용이 가능합니다.

보통 useState를 만들면 자동으로 상단에 생기지만 안 생길 경우 직접 작성해주시기를 바랍니다.

 

기본 틀

import { useState } from 'react';

function App() {
    const [제목,제목변경] = useState('나의 멋진 아름다운 미모'); //요기 만들기
    return (
        <div className="App">
            <div className='nav'>
                <h4>부자가되는게 꿈</h4>
            </div>
            <div>
                <h4></h4>
                <p>2023-01-01</p>
            </div>
            <p onClick={()=>{제목변경("사실은 평범한 미모")}}>{제목}</p> //만든거 사용하기
        </div>
    );
}

export default App;

'제목'이 ' 나의 멋진 아름다운 미모'가 됩니다.

'제목변경'은 '제목을 변경해주는 함수'입니다. 변수처럼 보이겠지만 함수입니다. useState 안에 함수로 저장되어 있는것을 우리는 쉽게 꺼내 쓰는겁니다.

 

  useState 변경

import { useState } from 'react';

function App() {
    const [제목,제목변경] = useState('나의 멋진 아름다운 미모'); 
    return (
        <div className="App">
            <div className='nav'>
                <h4>부자가되는게 꿈</h4>
            </div>
            <div>
                <h4></h4>
                <p>2023-01-01</p>
            </div>
            <p onClick={()=>{제목변경("사실은 평범한 미모")}}>{제목}</p> //요기보세요
        </div>
    );
}

export default App;

onClick를 사용해서 {제목}에 저장된 값을 변경을 해줄 수 있습니다.

위의 코드를 실행시키면 {제목을 누르면} '나의 멋진 아름다운 미모'라는 텍스트가 '사실은 평범한 미모'로 변경됩니다.

진짜인지 아닌지는 복붙해서 실행해보시기를 바랍니다.

 

 

  useState 활용

import { useState } from 'react';

function App() {
    const [제목,제목변경] = useState(['나의 멋진 아름다운 미모','나의 아름다운 몸']); 
    
    return (
        <div className="App">
            <div className='nav'>
                <h4>부자가되는게 꿈</h4>
            </div>
            <div>
                <h4></h4>
                <p>2023-01-01</p>
            </div>
            <p onClick={()=>{
             const 복사 = [...제목];   //요기보세요
             복사[0] = "사실은 평범한 미모"; //요기보세요
             재목변경(복사) //요기보세요
            }}>{제목[0]}</p> 
        </div>
    );
}

export default App;

데이터가 arrary로 이루어져 있을 때 해당 arrary를 복사해주고 원하는 값을 변경해주는 것이 좋다. 원본의 데이터는 수정하지 않는 것이 좋다. 왜냐하면 나중에 원본이 무엇이였는지 확인 할 수 있기 때문이다.

 

 

[react] - 리액트 강의처럼 독학 배우기

리액트 강의처럼 독학 배우기