개발 노트

React 본문

Javascript

React

Meter216 2023. 2. 23. 20:18

목차

 

1.JSX

2. Component Prop[

3. State

4. 생명주기

5. Event 등록

6. State 끌어올리기

 

React

컴포넌트 기반

기본적으로 컴포넌트를 기반으로 만들어진다. 컴포넌트는 하나의 아주 작은 단위로 나눠지는 것으로 

댓글로 예를 들면 댓글을 작성하는 부분, 댓글이 나오는 부분을 서로 나눌 수 있다.

 

이러한 컴포넌트에 상태를 부여해서 그 상태값이 변화 될 때 변화를 체크하고 다시 렌더를 시켜주도록 만들어주는 것이다.

 

기본적인 연습 Component는 앞선 게시글에서 연습을 해봤다.

<!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>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
        class LoginBtn extends React.Component{
            constructor(props){
                super(props)
                console.log(props)
                this.state = {
                    isLogin: false,
                }
            }

            render(){
                return (
                        <button 
                            onClick={()=>{
                                this.setState({ isLogin : !this.state.isLogin})
                            }}>
                            {this.state.isLogin ? "Logout": "Login"}
                        </button>
                )
            }
        }

        const root = ReactDOM.createRoot(document.querySelector('#root'))
        root.render(<LoginBtn id="1">하이하이</LoginBtn>)
    </script>
</body>
</html>

React의 기본적인 형태이다.

 

 

1. jsx

 

jsx 문법을 사용한다 

const element = <h1>Hello, world!</h1>;

이런형태의 코드를 작성 할 수 있다.

 

기본적으로 Javascript 를 베이스로 하고 있으며 html 식의 코드도 작성 할 수 있게 된다.

{}를 사용함으로 Javascript 문법으로 코드를 작성 할 수도 있다.

브라우저에서 실행하기 전에 Babel을 통해서 일반 자바스크립트 문법으로 변환이 가능하다.

2. Component Props

 

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element)

다음과 같은 코드를 작성했을 때 

Welcome 에 있는 name 의 경우 Welcome 의 props로 받을 수 있게 된다.

props.name "Sara" 가 들어가게 되는 것이다.

props의 경우에는 부모 > 자식으로 한방향으로만 전달된다.  //  자식 => 자식 x  // 자식 => 부모 x

 

**대문자로 시작하는것은 Component 이다. Component는 항상 대문자로 시작하도록 작성한다.

3. state

 

element에서 표현하고자 하는 데이터를 모아놓는 곳이다.

state 값을 변경이 감지되 다시 렌더를 시킬 수 있다. 

class 문법의 경우 

this.state = {}

함수형의 경우

import {useState} from "react"

const [state, setState] = useState("state기본값")

통해 선언 할 수 있다.

class 는 setState()를 통해  상태를 서로 비교하여, 변경사항이 있다면 상태를 바꿀 수 있다. 

함수형의 경우는 선언한 함수 ( 위에서는 동일하게 setState로 선언했다. ) 를 통해 변경 가능 하다.

 

state가 변경되면 Component는 다시 렌더가 된다.

4. 생명주기

 

컴포넌트가 생성되고, 업데이트 되고, 삭제되는것을 Life cycle 에 빗대에 말하는 것이다.

 

componentDidMount()

 = 마운트로 제일 처음 컴포넌트가 생성되고, 실행이 되는 메서드다.

 

componentDidUpdate() 

 = state나 props 등의 상태 변경으로 인해 컴포넌트가 업데이트 됐을 때 사용할 수 있는 메서드이다.

 

componentWillUnmount()

 = 컴포넌트가 삭제 될 때 사용할 수 있는 메서드이다.

 

외에 componentDidCatch()  Error를 캐치 할 수 있는 메서드도 있다고 한다.

 

5. 이벤트 등록

 

기본적으로 작동시키는 방식은 DOM과 비슷하다.

다만 문법적으로 조금의 차이가 있다.

    const handlerClick = (e) => {
        console.log("click")
    };

    return (
        <>
            <div onClick={handlerClick} >click</div>
        </>
    );

함수를 선언 한 후 onClick 에 함수 값을 넣어줌으로 실행시킨다.

onClick 외에도 onSubmit 등 다양한 이벤트를 넣을 수 있다.

 

6. state 끌어 올리기

 

앞서 만든 함수와

같이 부모에서 함수와 상태를 만들어 주고  =>  상태를 바꾸는 함수를 만들어 준 후  => 상태와 함수 값을 자식 Component로 넘긴다.  

이후 자식 Component에서 함수를 실행 할 경우 부모 상태가 변하고  => 컴포넌트가 업데이트 되며 업데이트 된 상태값이 자식에게 전달

const Comment = ({ user }) => {
    const [list, listSetState] = useState([]);
    const handlerSubmit = (e) => {
        e.preventDefault();
        const data = [...list];
        if (!user) return alert("로그인 정보가 없습니다.");
        if (!e.target.comment.value) return alert("내용이 없습니다");
        data.push({ writer: user, comment: e.target.comment.value });
        listSetState(data);
        e.target.reset();
        e.target.comment.focus();
    };

    const [current, currentSetState] = useState(1);

    const handlerClick = (e) => {
        currentSetState(e.target.innerHTML);
    };

    return (
        <>
            <CommentForm onSubmit={handlerSubmit} count={list.length} />
            <CommentList list={list} current={current} onClick={handlerClick} />
        </>
    );
};

Comment Form Component로 handlerSubmit 함수와 list의 값을 전달했다.

 

const CommentForm = (props) => {
    return (
        <>
            <Form onSubmit={props.onSubmit}>
                <div>
                    <span>총 댓글 수 : {props.count}</span>
                    <Input />
                    <button type="submit">댓글 등록</button>
                </div>
            </Form>
        </>
    );
};

export default CommentForm;

Commentform 에서 onSubmit 으로 함수를 실행시킬 경우 > 부모 엘리먼트의 list의 상태가 변하게 되고,

새로 업데이트 된 컴포넌트에서 list를 다시 Commentform으로 전달하게 된다.

이러한 과정을 상태 끌어 올리기 라고 한다.

저작자표시 (새창열림)

'Javascript' 카테고리의 다른 글

React 3.6 정리  (0) 2023.03.06
React - tic tac toe  (0) 2023.02.24
Promise  (0) 2022.12.21
배열 메서드[join,map,filter,reduce]  (0) 2022.12.08
무한루프 slide , pre next 버튼 만들어보기  (0) 2022.12.05
'Javascript' Related Articles more