728x90

React 초보자 입문강의 정리

 

설명출처영상 : https://www.youtube.com/watch?v=qcphnSqneE0 123탄

온라인 코딩툴 사이트 : https://replit.com/

 

리액트의 장점

1. 리액트는 자동으로업데이트를 해준다.

2. 코드 재활용을 많이한다

3. 코드정리가 깔끔하다 - html + javascript = JSX문법

 

 

App.jsx 

import './App.css'

export default function App() {
  return (
    <main>
       rebornborn⚛️ + Vite ⚡ + Replit 🌀
    </main>
  )
}

여기 내용이 웹사이트에서 보일내용이다.

안에 내용을 입력하고 수정해보자 ,

reflesh하지 않아도 자동으로 업데이트 되는 것 을 확인 할 수 있다.

 

이것의 원리가 무엇일까?

리액트는 싱글페이지어플리케이션(SPA)이라고  html파일이 하나밖에없다.

하나의 웹페이지에 내용만 바꿔주는 것이다.

그래서 마치 유저 눈에는 웹페이지가 여러개인것처럼 보인다.

 

 

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React + TypeScript + Replit</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/index.jsx"></script>
		
    <!--
    This script places a badge on your repl's full-browser view back to your repl's cover
    page. Try various colors for the theme: dark, light, red, orange, yellow, lime, green,
    teal, blue, blurple, magenta, pink!
    -->
    <script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>
  </body>
</html>

index.html파일의 root를 기억하자

 

 

index.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<App />
	</React.StrictMode>
)

 

index.jsx는 index.html 파일과 app.jsx를 연결해주는 연결고리이다.

아까 기억하라던 그 id "root"를 다큐먼트에서 선택

App은 ./App.jsx에서 수입해온것

APP을 가져와서 root에 입힌다. 라는 뜻이다

 

 

자 기본 파일에 대해 알아보았다. 이제 App.jsx에서 코드를 입력해보자.

 

App.jsx

import './App.css'

export default function App() {
  return (
    <main>
      <div className="box">
        Box1
        RebornBB
      </div>
    </main>
  )
}

기존에 우리는 class라는 선택자를 통해 css로 화면을 꾸며주었지만,

리액트에선 className라고 한다. className에서 box라는 이름을 만들어주었다.

도큐먼트에 import './App.css' 라는 부분이 있다는 것을 확인할수있는데,

바로 App.css가 box라는 이름을 정의해줄수 있는 도큐먼트이다.

html에 <link>태그 같은 느낌.

 

 

App.css

.box{
  border: 1px solid red;
  width : 100px;
  height : 100px;
}

이렇게 입력하면 css가 바로 반영되는 것을 확인 할 수있다.

 

 

리액트의 장점은 코드가 바로 반영된다는 것뿐만이 아니다.

예를 들어 우리가 방금 App.jsx에서 만들었던 1개의 박스를 똑같이 3개를 더 만든다고 하자

import './App.css'

export default function App() {
  return (
    <main>
      
      <div className="box">
        Box1 
        RebornBB
      </div>
      
      <div className="box">
        Box1 
        RebornBB
      </div>

      <div className="box">
        Box1 
        RebornBB
      </div>

      <div className="box">
        Box1 
        RebornBB
      </div>
      
    </main>
  )
}

기존의 html파일에선 우리는 이런식으로 4개의 박스를 만들어주고 자연스레 코드도 길어졌을 것이다.

같은 내용의 코드가 반복이된다.

 

 

리액트는 이 반복되는 코드문제를  해결할수있다.

파일을 하나 더 만들어보자 

 

Box.jsx

import './App.css'

function Box(){
  return (
      <div className="box">
        Box1 
        RebornBB
      </div>
      
  )
}

export default Box

export default Box - 박스라는 컴포넌트를 수출하겠다.라는 뜻이다

 

수출을했으면 수입을해보자.

import './App.css'
import Box from './Box';

export default function App() {
  return (
    <main>
      
      <Box />
      <Box />
      <Box />
      <Box />
      
    </main>
  );
}

import Box from './Box'; 로 Box.jsx을 수입하고

Box는 컴포넌트이다. 컴포넌트를 하나 불러오기만 하면된다. <Box />

 

이것이 리액트의 장점 바로 재활용이다.

 

 

 

만약 박스안의 내용을 다 다르게 바꾸고 싶다면?

Box.jsx

import './App.css'
import Box from './Box';

export default function App() {
  return (
    <main>
      
      <Box name="홍길동"/>
      <Box name="김길동"/>
      <Box name="이길동"/>
      <Box name="박길동"/>
      
    </main>
  );
}

App.jsx

import './App.css'

function Box(props){
  return (
      <div className="box">
        Box1 
        {props.name}
      </div>
      
  )
}

export default Box

(props) 를 추가하고

이름부분에 

{props.name}을 대신넣어주자.

이름이 다 다르게 들어간 것을 확인할수있다.

 

이것을 리액트의 props라는 개념이라고 한다.

 

각각의 컴포넌트에 다이나믹한 값을 주고싶을때 

(1) props name을 정한후 주고싶은 값을 준다.

(2) props는 객체타입이다. props ={name:"홍길동"}

(3) props.name으로 불러오기

 

 

props를 배웠으니 박스숫자도 다 다르게 만들어보고, 알림문구가 뜨는 버튼도 생성해보자.

 

Box.jsx

import './App.css'
import Box from './Box';

export default function App() {
  return (
    <main>
      
      <Box name="홍길동" num="1"/>
      <Box name="김길동" num="2"/>
      <Box name="이길동" num="3"/>
      <Box name="박길동" num="4"/>
      
    </main>
  );
}

App.jsx

import './App.css'

function Box(props){
const clickMe =()=>{
  alert("리액트강의를 마쳤습니다!")
}
  
  return (
      <div className="box">
        Box{props.num}
        {props.name}
        <button onClick={clickMe}>클릭!</button>        
      </div>
      
  )
}

export default Box

HTML도 있는데 자바스크립도 있다. 이것이 바로 JSX문법이다.

 

html컴포넌트와 그와 관련된 함수를 뭉쳐서 세트로만든다 = 컴포넌트

리액트는 컴포넌트를 여러개만들어서 가져다가 쓴다. = 코드의 재활용

 

출력 결과

리액트의 중요개념은 3가지이다.

1. 컴포넌트

2. props 

3. state 

 

컴포넌트와 props에 대해서는 위에서 배웠으니

state에 대해서 다룰 것이다.

 

이번엔 count를 해보자.

버튼을 누르면 숫자가 증가하는 것을 해볼 것이다.

 

App.jsx

import './App.css'

export default function App() {
  let count = 0;
  const increase = () =>{
    count = count + 1
    console.log("count work?", count)
  }
  
  return (
    <main>  
      <div> {count} </div>
      <button onClick={increase}> 숫자증가 </button>     
    </main>
  )
}

이렇게 작성하고 웹을 보면 화면에서 숫자변화는 없지만, 

콘솔에서는 숫자가 증가된 것을 확인 할 수 있다.

 

여기서 나오는 것이 state라는 개념이다.

 

여기서 문제, 리액트가 왜 리액트인가?

그들이 이름을 붙인 이유는 무엇일까?

리액트를 쓰는 이유를 생각해보자.

우리가 리액트를 사용하는 이유는

 

html javascript를 할때

let a = "누나"
a = "오빠"
document.getElementById("text-box").innerHTML = a

document.getElementById() 로 매번 UI를 업데이트했다.

하지만 이것을 매번 사용하는 것은 매우 귀찮다.

변수가 바뀌면 알아서 UI업데이트를 해주면 안되나라는 생각을 할수있다.

 

그래서 나온 것이 리액트이다.

 

무엇에 리액션을 할 것이냐? state에 리액션을 할 것이다.

자동으로 값이 업데이트가 되면 UI도 업데이트 시켜주자! 해서 나온 것 = 리액트

수많은 변수들이 바뀔때마다 매번 UI업데이트를 해주는 것에 대한 문제에서 나온 것 = state

state가 업데이트가 된다 => UI렌더링 해주자

 

 

App.jsx

import React,{useState} from 'react';
import './App.css'

export default function App() {

  const [count2, setCount2] = useState(0)
  //useState라는 함수는 배열을 반환한다 
  //(0)은 초기값 
  //초기값을 담고있는 state변수 = count2
  //state의 값을 업데이트해주는 set함수 = setCount2
  
  const increase = () =>{
    setCount2(count2 + 1)
    //setCount2는 함수이다.
  }
  
  return (
    <main>  
      <div> {count2} </div>
      <button onClick={increase}> 숫자증가 </button>     
    </main>
  )
}

이렇게 작성하면 숫자가 잘 올라가는 것이 확인된다.

 

useState = 리액트에서 제공하는 유용한 함수중 하나

 

const [count2, setCount2] = useState(0)
useState라는 함수는 배열을 반환한다 
(0)은 초기값 
초기값을 담고있는 state변수 = count2
state의 값을 업데이트해주는 set함수 = setCount2

 

 

여기서 console.log를 찍어보자.

import React,{useState} from 'react';
import './App.css'

export default function App() {
  let count = 0;
  const [count2, setCount2] = useState(0)
  //useState라는 함수는 배열을 반환한다 
  //(0)은 초기값 
  //초기값을 담고있는 state변수 = count2
  //state의 값을 업데이트해주는 set함수 = setCount2
  
  const increase = () =>{
    count = count + 1
    setCount2(count2 + 1)
    //setCount2는 함수이다.
    console.log("count work?" , count , "state count2" , count2)
  }
  
  return (
    <main>  
      <div> {count} </div>
      <div> {count2} </div>
      <button onClick={increase}> 숫자증가 </button>     
    </main>
  )
}

버튼을 눌러 확인해보면 

이상하게도 버튼위 숫자는 1이지만, console에서는 0으로 뜨는 것이 확인 될 수있다.

 

왜 state값은 1박자 늦을까?

 

state가 업데이트되면 UI를 다시 그려준다.

바로 state값을 바꿔주지않고, 함수가 끝나면 값을 업데이트하기 시작한다. = 비동기적

state를 쓸때 한박자씩 느리다는 것을 반드시 알아두어야 한다.

 

 

 

이때 또 하나의 의문점! count 값은 왜 계속 1일까?

 

count변수가 업데이트안되는 이유 :  

state값을 업데이트할때마다, 컴포넌트 = function App() 가 다시 실행되면서

새로운 값으로 UI 업데이트를 그려주게된다.

컴포넌트가 다시 실행이 되니 count 변수가 0으로 계속 초기화 되기에

count 변수는 기존의 값이 저장이 되지않는다.

 

 

결론 : 변수는 잠깐 저장해도되는 값을 저장하고

나머지는 state로 사용하면 된다.

728x90

'STUDY > React' 카테고리의 다른 글

[React] 리액트 기초 개념 정리 (DOM, JSX, Element)  (2) 2025.01.03
[React] 비동기 - 사진 출력하기  (0) 2022.09.13
[React] 다크모드버튼, 카운트버튼 만들기  (0) 2022.09.13

티스토리툴바