광산김가네

[모각코]ReactJS 시작하기(4)_state 함수,props까지 본문

TIL(Today I Learn)

[모각코]ReactJS 시작하기(4)_state 함수,props까지

어둠의 그림자 2022. 8. 1. 12:39

이번시간에는 다음시간에 이어 setState함수에 이어서 state에 대해서 더 알아보았다

컴포넌트의 핵심키워드중하나인 props까지 학습해보았다.

1.useState 사용하기 리뷰

const [ counter,setCounter] = React.useState(0);

 

 위의 코드처럼 useState의 반환값 두개를 1.바꿔줄 변수 2.바꿔줄 변수를 다루는 함수 이름을 선언해줘서 

사용한다.

여기서 setCounter와 같이 바꿔줄 변수를 다루는 함수는 크게 두가지 방식으로 사용한다

1. 인자로 변경될 내용 작성

setCounter(변수의 변경내용) 이런식으로 쓰는데

setCounter(10000)으로 정적인 데이터를 넣어주거나

setCounter(counter+1) 변수를 포함한 식으로 넣어줄수있다

2. 화살표 사용하기

setCounter((current)=>current+1);

사실 setCounter(counter+1)과 같은 표현이다.

근데 리액트에서는 더 안전하고 정확한 표현을 반환할수있는 표현식이라고한다!

"현재값"을 바탕으로 업데이트한다! 라는 표현이라 혼동을 주는걸 방지해주는 그런 확실한 표현이라고 한다.

 

2.사용자 Input으로 state 조절하기

노마드코더 강의에서는 단위 변환기를 만들어보았다 코드는 아래와같다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
<script src = "https://unpkg.com/react@16.7.0/umd/react.development.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    function App(){
    	const [minutes,setMinutes] = React.useState();
        const onChange = () =>{
        	console.log("somebody wrote");
        };
        return(
        <div>
            <h1>Super Converter</h1>
            <label htmlfor="minutes">Minutes</label>
            <input 
            value ={minutes}
            id="minutes"
            placeholder ="Minutes"
            type = "number"
            onChange ={onChange}/>
            <h4>You want to convert {minutes}</h4>
            <label htmlfor="hours">Hours</label>
            <input for="hours" placeholder="Hours" type = "number"/>
        </div>
        );
        const root = document.getElementById("root");
        ReactDOM.render(<App />,root);
    }
</script>
</html>

이 예제에서는 리스닝하는 이벤트자체가 onChange라서 딱히 setMinutes에 대한 설정은 안해줬다.

3.props

다음 강좌를 듣기앞서 구글링을 통해 먼저 props에 대해 알아보았다.

 

properties(속성)의 줄임말로 컴포넌트끼리 값을 전달할때 사용하는 얘이고

수정할수없다는 특징을 가지고있다

예제를 통하여 간단하게 props의 사용방법을 알아보았다

다음은 APP 컴포넌트에서 Main컴포넌트에 name으로 선언해준 프로퍼티를 넘겨준 예제이다 

App.js

import React, { Component } from 'react';
import Header from './component/Header';
import Footer from './component/Footer';
import Main from './component/Main';

function App() {
  return (
    <div>
      <Header />
      <Main name="갓대희"/>
      <Footer />
    </div>
  );
}

export default App;
출처: https://goddaehee.tistory.com/300 [갓대희의 작은공간:티스토리]

Main.js

import React from 'react';

function Main(props) {
    return (
        <div>
            <main>
                <h1>안녕하세요. {props.name} 입니다.</h1>
            </main>
        </div>
    );
}

export default Main;
출처: https://goddaehee.tistory.com/300 [갓대희의 작은공간:티스토리]

Main.js에서 props. name으로 앞서 name에 선언해준 이름을 불러오는 예제이다

저작자표시 비영리 변경금지 (새창열림)

'TIL(Today I Learn)' 카테고리의 다른 글

[모각코]React 시작하기(6)_create-react-app  (0) 2022.08.06
[모각코]ReactJS 시작하기(5)_props  (0) 2022.08.05
[모각코]React Js 시작하기(3)_state에 대해서  (0) 2022.07.29
[모각코]React Js 시작하기(2)  (0) 2022.07.25
[Python]파이썬으로 엑셀 데이터 다루기_openpyxl 라이브러리  (0) 2022.07.13
'TIL(Today I Learn)' Related Articles more