광산김가네

[모각코]ReactJS 시작하기(5)_props 본문

TIL(Today I Learn)

[모각코]ReactJS 시작하기(5)_props

어둠의 그림자 2022. 8. 5. 14:01

저번시간에도 간략하게 props에 대해서 보았지만 이번시간에 예제를 통하여 props에 대해서

확실하게 알아보려고한다.

props란?

컴포넌트때부터 쭉 익혀왔듯이 부모-자식 컴포넌트간에 소통하기위한 친구인데

난 쉽게 생각해서 인자라고 생각했다

예제코드를 함께 봐보면

<!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 crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	<script type = "text/babel">
        function SaveBtn(){
            return <button style={{
                backgroundColor : "tomato",
                color:"white",
                padding: "10px 20px",
                border:0,
                borderRadius:10,
            }}>Save Change</button>;
        }
        function ConfirmBtn(){
            return <button style={{
                backgroundColor : "tomato",
                color:"white",
                padding: "10px 20px",
                border:0,
                borderRadius:10,
            }}>Confirm</button>;          
        }
        function App(){
            return(
			<div>
                <SaveBtn/>
                <ConfirmBtn />
            </div>
			);
        }
        
        ReactDOM.render(<App/>,root);
    </script>
</html>

위와 같은 버튼두개의 style을 이렇게 복붙하여 컴포넌트에 붙여넣기하는것은

코드량도 많고 비효율적이다

그치만 우리학교 사이트는 모두 저렇게 되어있ㄷ..

또한 두 버튼은 버튼안의 텍스트만 다르기때문에 공통된요소를 컴포넌트로 생성하고

이를 부모컴포넌트, 즉 App 컴포넌트에서 사용할때 props로 값을 다르게 전달해주면 해결된다.

function을 생성할때 항상이름 옆에 ()이렇게 인자가 들어가기 딱좋은 괄호를 붙여주기때문에

 

여기에 props라고 적어주고 부모컴포넌트에서 사용할때 태그안에 props = {원하는값}을 넣어주면

전달된다.

**단 자식 컴포넌트에서 원하는 위치에 {}로 props의 어떤속성을 쓸건지 기재해줘야된다

자동으로 알아서 찾아주는 그러진않음ㅎ.ㅎ

<!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 crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	<script type = "text/babel">
        function Btn({text}){
            return <button style={{
                backgroundColor : "tomato",
                color:"white",
                padding: "10px 20px",
                border:0,
                borderRadius:10,
            }}>{text}</button>;
        }
       
        function App(){
            return(
			<div>
                <Btn text ="Save Change"/>
                <Btn text ="Continue"/>
            </div>
			);
        }
        
        ReactDOM.render(<App/>,root);
    </script>
</html>

짠!

props를 사용해서 코드를 더 간결하게 해결해주었다.

지난시간에는 props.요소로 사용해주었는데

shortcut으로 보통 파라미터 괄호안에 {}로 원하는 인자들을 쭉 써주는게 훨씬 간편하고

많이쓰는 방식이라고 한다.

 

더불어 eventListner로 달아주고싶은 경우에도 똑같이 함수를 인자로 받아 이를 

컴포넌트안에서 설정해주면된다.

아무리 이벤트 이름이 똑같다해도 자동으로 연동되는것이 아니므로

아래와 같이 설정해줘야한다.

잘못된 예시

{/*생략*/}
        function Btn({text}){
            return <button style={{
                backgroundColor : "tomato",
                color:"white",
                padding: "10px 20px",
                border:0,
                borderRadius:10,
            }}>{text}</button>;
        }
       
        function App(){
            const [value,setValue] = React.useState("Save Changes");
            const changeValue = ()=>setValue("Revert Change");
            return(
			<div>
                <Btn text ={value} onClick ={changeValue}/>
                <Btn text ="Continue"/>
            </div>
			);
        }
        
        ReactDOM.render(<App/>,root);
    </script>
</html>

올바른 예시

{/*생략*/}
        function Btn({text,onClick}){
            return <button 
            onClick = {onClick}
            style={{
                backgroundColor : "tomato",
                color:"white",
                padding: "10px 20px",
                border:0,
                borderRadius:10,
            }}>{text}</button>;
        }
       
        function App(){
            const [value,setValue] = React.useState("Save Changes");
            const changeValue = ()=>setValue("Revert Change");
            return(
			<div>
                <Btn text ={value} onClick ={changeValue}/>
                <Btn text ="Continue"/>
            </div>
			);
        }
        
        ReactDOM.render(<App/>,root);
    </script>
</html>

props rerendering :  React.memo

render되는 부분을 체크하는것은 웹사이트 속도 측면에서 중요한 부분이라고 한다.

아직 백엔드적 지식이 부족해서 얼마나 중요한지는 모..르고 직관적으로 봤을때 어디가 render되는지 모르기때문에

render되는부분이 뭔지 체크하려면 console.log로 render의 횟수를 체크해보면된다.

 

위의 코드같이 작성을하면, 두개의 자식 컴포넌트(버튼)이 버튼을 클릭할때마다 render되는데

두번째 버튼의 경우 클릭할때마다 변화가 없는데 얘는 걍 깍두기(라고 써야되는데 단무지라 쓸뻔)마냥

같이 render 된다.

 

이를 방지하기위해 React.memo라는 기능이있다.

 

 const MemorizedBtn = React.memo(Btn);
 {/*생략*/}
 return(
        <div>
            <MemorizedBtn text ={value}/>
            <MemorizedBtn text ="Continue" />
        </div>
);

위와 같이해주면 정적인 데이터를 갖고있는(=안바뀌는 text)버튼 

rerender 되지않는다

props Tip :  propTypes 설정

props는 c언어 처럼 인자로 넣어줄때 인자의 형식을 같이 선언해주는게 아니라

이름만 넣어줘도 되기때문에 다른 형식을 넣어줘도 별도의 에러는 뜨지않는다!

 

따라서 협업할때 뭐 실수로 다른 형식을 넣어줄수도있는등의 애로사항이 있어

propTypes를 지정해줄수있다고 한다.

MemorizedBtn.propTypes ={
    text : PropTypes.string.isRequired,
    fontSize: PropTypes.number.isRequired,
 }

위와같이 선언해주면 되며, 위반될시 개발자도구 console에 에러가 뜬다~,~

isRequired의 경우 필수매개변수를 선언해주는 역할이다.

+JS 문법이긴한데 props도 다음과 같이 기본으로 설정이 가능하다.

이번시간까지해서 react의 전체적인 구조(vs VanilaJS와의 차이)부터 리액트의 기본적 구성요소인 JSX, component, state, props까지 모두 학습해보았다.

 

다음시간에는 드디어 create-react-app으로 생성할수있는 수많은 파일들을 살펴보고

본격적으로 react 개발을 시작하려고한다

저작자표시 비영리 변경금지

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

[Flutter] No MaterialQuery widget ancestor found 오류 해결  (0) 2022.08.11
[모각코]React 시작하기(6)_create-react-app  (0) 2022.08.06
[모각코]ReactJS 시작하기(4)_state 함수,props까지  (0) 2022.08.01
[모각코]React Js 시작하기(3)_state에 대해서  (0) 2022.07.29
[모각코]React Js 시작하기(2)  (0) 2022.07.25
'TIL(Today I Learn)' Related Articles more