티스토리 뷰

차곡차곡/Frontend

[React] Props와 State / 리액트로 클릭 카운터 만들기

p퐝유p 2022. 4. 17. 21:47

★ 별도로 지정한 props가 없을 때, defaultProps를 지정하려면?

 

화살표 함수를 이용해서 컴포넌트를 생성했다.

 

defaultprops는 props를 따로 지정해주지 않아도 기본값으로 전달해주는 props를 말한다.

 

이렇게 해주면 된다.

 

위 컴포넌트처럼 빈 props가 전달되지 않았을 때, 항상 기본값을 갖고 싶으면 defaultProps를 사용해서 해결할 수 있다.

 

 

★ State란?

- State란 props처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체이다.

  하지만! 

  props : (함수 매개변수처럼) 컴포넌트에 전달됨

  State:(함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리

  된다는 차이점이 있다.

 

 props를 사용했는데도 state를 사용하는 이유는,

 사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜서 양쪽의 편의성을 각자 도모하는 것에 있다. 

 

★ Before State 컴포넌트 생성

 

 

결과는 이렇다.

★ State 컴포넌트 생성

 

이 코드는 리액트 패키지에서 useState라는 함수를 불러와준다.

이것은 리액트 Hooks 중 하나이다.

콘솔에서 이렇게 출력된 것을 확인할 수 있다. 

 

Example 함수를 생성한다. 

출력 확인 at  콘솔.

 

이렇게 count값을 컴포넌트 내부에서 관리하는데 이 count 값을 하나의 State라고 한다. 

 

1. count의 초기값 : 0 설정

2. count : 초기값 및 변경된 값으로 활용

3. setCount : count 값을 변경할 수 있도록 도와주는 함수, setCount를 거치지 않고서는 count값은 수정이 불가하다.

 

이것을 기반으로 버튼을 클릭할 때마다 클릭 횟수가 출력된다.

<!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@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/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">
        // //1.props
        // // Component라는 이름의 컴포넌트를 화살표 함수로 작성
    
        // const Component = props => {
        //     console.log(props);
        //     return <h1>It's a {props.value}</h1>            
            
        // };
             
        
        // //별도로 지정한props가 없을 때, defaultProps를 지정하려면
        // Component.defaultProps = {
        //     value:'default value'
        // }

        // ReactDOM.render(<Component value="Function Component"/>,document.getElementById('root'));

        //2. Before state
        // let count = 0;
        // //BeforeState 컴포넌트 생성
        // const BeforeState = props => {
        //     //clickHandler : click 이벤트를 처리할 핸들러 함수 (화살표 함수)

        
        //     const clickHandler = () => {
        //         count++;
        //         console.log(count);
                
        //     };

        //     return (
        //         <div>
        //             <p>You clicked {count} times.</p>    
        //             <button onClick={clickHandler}>Click me!</button>
        //         </div>
        //     )
        // };
        // ReactDOM.render(<Beforestate/>,document.getElementById('root'));

        // 3. state
        const {useState} = React; // distruct한거임
        // console.log(useState);    
        const Example = props => {
             console.log('Example rendered');
            //count값을 컴포넌트 내부에서 관리
            //이러한 count값을 하나의 state라고 함.

            //const [state,setState] = useState(initialState);
            //state : Component에서 관리하는 값
            //setState : state값을 변경할 수 있는 setter함수
            //initialState: 초기 상태값, 초기값


            const [count,setCount] = useState(0); // count의 초기값을 0으로 세팅
            // console.log(count); // 초기값 및 변경된 값 (둘 다 활용됨.)
            // console.log(setCount);// Count값을 변경할 수 있도록 도와주는 함수
            //SetCount()를 거치지 않고서는 count값 수정 불가.

            const clickHandler = () => {//클릭 이벤트 핸들러
                // count+=1;
                setCount(count +1);
                console.log(count);
                // state(여기서는 count)가 변경되면 React는 변경을 감지하고,
                // ReactDOM이 새로 랜더링 시킴.  
            };



            return (
                <div>
                    <p>You clicked {count} times.</p>    
                    <button onClick={clickHandler}>Click me!</button>
                </div>                
            )
        };
        
        ReactDOM.render(<Example/>,document.getElementById('root'));
    </script>
</body>
</html>

'차곡차곡 > Frontend' 카테고리의 다른 글

[React] 조건부 렌더링하기  (0) 2022.04.18
[React] 이벤트 처리하기 / 토글 버튼 클릭에 따라 전구 켜기  (0) 2022.04.17
[React] Components와 Props / 컴포넌트 다이어트 성공기  (0) 2022.04.17
[React] 엘리먼트 렌더링 - tick 만들기  (0) 2022.04.17
[React] JSX  (0) 2022.04.15