본문 바로가기
React를 같이 배워보자

React2일차-React 컴포넌트2

by 멈추지않아 2022. 1. 21.
*주의*
내가 복사해놓은 부분 중에 앞에 // 이거는 내가 주석 처리한거다 같이쓰면 오류나고 나중에 다시쓸려고 지우지 않고 주석처리해서 코드에 영향안끼치고 지우지는 않게 하기 위해 만들어 놓은거다
*추가설명*
컴포넌트나 클래스를 이용해서 <div>hello</div>이런식으로 넣을때 최상위 요소는 하나만 있어야된다 즉
<div>hello</div>
<div>hello</div>
이거는 최상위요소가 div 두개기때문에 오류가 나온다 하지만  이렇게 넣고싶으면React.Fragment를 활용하면 된다
<div>
   <div>hello</div>
         hello
</div>
이거는 최상위요소가 div 하나기때문에 저상 작동한다.


 

 

 

 

React2일차-React 컴포넌트1을 이어서 하겠다

여기서 script 부분을 다지우고 

class ClCom extends React.Component{
        render(){
            return <div>hello</div>;
        }
    }
    ReactDOM.render(<ClCom />,document.querySelector('#root'))
이거를 집어넣고 저장

이렇게 변할거고

npx serve 로 켜놓은 localhost 는 새로고침하면 이렇게 변할거다(물론안되면 오타나 저장 확인)

이렇게 변하면 성공

또분석가자 다음부터는 어디넣는지 안올릴꺼다 ㅎㅎ 오늘처럼 저기 script부분에 넣으면 된다 

넣고 나서 npx serve  화면이 어떻게 되는지는 계속 올리 겠다

class ClCom extends React.Component여기서는 class가 뭔지 가중요한다.
class=정수 실수처럼 어떤 개념을 만드느거라고 생각하면 편하다 예를들면 모닝자동차를 클래스라고 하면 그내부에는 의자 변속기 오디오 등 여러가지 가 들어가있는 개념이 생긴거다 모닝자동차라고 하면 우리는 모닝자동차가 어떤건지 생각이 나듯이 그런 개념이다.
extends=이거는 상속 받는다고 생각하면 된다. 또 모닝자동차를 가져오자 이건 자동차에서 상속받은거다 우리가 모닝에 변속기 의자가 있는건 어떻게 알수있을까 바로  모닝 자동차도 자동차의 형식을 가져와서 만들어졌기때문이다 하지만 자동차랑 똑같지는 않다 다른부분을 추가된게 있을것이다.
즉 class 모닝자동차 extends 자동차  일런 느낌이다.

ClCom이거 내가 대충 만든 이름이다 ㅎㅎ 

React.Component이거는 저번게시물에서 설명했듯이 React에서 Component 라는 것을 가져온것이다.

     render(){
            return <div>hello</div>;
        }

이부분을 알아보자 아까 render라느게 있었지만 이건 다른거다 <div>hello</div>이거를 반환해주는 다른함수다 함수도 이름마다 특정한 기능을하도록 미리 정해놓은게 있다 이것도 그중하나라고 생각하면 편하다.

  
    ReactDOM.render(<ClCom />,document.querySelector('#root'))
 이부분은 앞에 대부분 설명했으니 안하고

<ClCom />

이거만 설명하겠다 일단 이렇게쓰면 class이면 render가 실행이 되고 

<div>hello</div>가 전달이된다 그리고 이렇게 전달이 되면 뒤에 정해진 공간에 이게 들어간다 라고 생각하면 편하다  나도 그렇게 이해하고 있다

다음 script 내용 지우고 

function Fun(){
        return <div>hello</div>;
    }
   
    //const Fun=()=> <div>hello</div>;
   
    ReactDOM.render(<Fun />,document.querySelector('#root'))
이걸 넣어보자
npx serve 로 켜놓은 창은 이렇게 된다.

 

이렇게 나온다
function Fun(){
        return <div>hello</div>;
    }
이거와 
 

const Fun=()=> <div>hello</div>;

이거는 모양만 다를뿐 똑같다.

function 함수이름(){

함수내용

}

 

const 함수이름=()=>{함수내용} 

한줄뿐이고 그게 return이면 대괄호 생략 가능결국 <div>hello</div>이거를 전송한다는 내용이다

ReactDOM.render(<Fun />,document.querySelector('#root'))

<Fun />

이거만 설명하겠다.Fun은 함수이다 즉 저런식으로 되면 return된것을 정해진공간에 넣겠다 는 뜻으로 이해했다.

return 값이 저렇게 html형식이어야 되는거 같다.

 

다음은 script 다지우고

  ReactDOM.render(
        React.createElement(React.Fragment,null,`안녕하세요`),
        document.querySelector("#root")
    )
이렇게 넣어주자
 

npx serve 로 켜놓은 창은 이렇게 된다.

이렇게 나온다

  ReactDOM.render(
        React.createElement(React.Fragment,null,`안녕하세요`),
        document.querySelector("#root")
    )

 

여기서 다설명했지만 

React.Fragment

이거는 설명안했다 저건 어떤 뜻이냐 하면 원래 저기는 p ,h1,div처럼 태그이름이 들어가야된다. 하지만 저글자가 들어가면 그런거 없이 바로 내용만 들어간다. 즉 p가 있었으면 <p>안녕하세요</p> 이렇게 저장됬을텐데

지금은  안녕하세요 이렇게 저장된다.

 

그다음이다 이제 script 내용을 지우고 
// <div>
    //     <div>
    //         <h1>주제</h1>
    //         <ul>
    //             <li>React</li>
    //             <li>Vue</li>
    //         </ul>
    //     </div>
    // </div>
    // ReactDOM.render(
    //     React.createElement("div",
    //     null,
    //         React.createElement("div",
    //         null,
    //             React.createElement("h1",
    //             null,
    //                 "주제"),
    //             React.createElement("ul",
    //             null,
    //                 React.createElement("li",
    //                 null,
    //                 "React"),
    //                 React.createElement("li",
    //                 null,
    //                 "Vue")
    //             )
    //         )
    //     ),
    //     document.querySelector("#root")
    // )
    ReactDOM.render(
        <div>
        <div>
            <h1>주제</h1>
            <ul>
                <li>React</li>
                <li>Vue</li>
            </ul>
        </div>
    </div>
        ,document.querySelector('#root')
    )
이걸 넣어보자
npx serve 로 켜놓은 창은 이렇게 된다.

이렇게 된다

특정 공간에

 
 <div>
        <div>
            <h1>주제</h1>
            <ul>
                <li>React</li>
                <li>Vue</li>
            </ul>
        </div>
    </div>
이렇게 넣을려면
ReactDOM.render(
        React.createElement("div",
        null,
            React.createElement("div",
            null,
                React.createElement("h1",
                null,
                    "주제"),
                React.createElement("ul",
                null,
                    React.createElement("li",
                    null,
                    "React"),
                    React.createElement("li",
                    null,
                    "Vue")
                )
            )
        ),
        document.querySelector("#root")
    )

이런식으로 길고 복잡하고 읽기도 불편하게 중첩으로 넣어야된다. div안에 div를 넣고 그안에 h1과 ul을 넣고 ul안에는 li2개 넣고 복잡하다 하지만 바벨을 사용하면

ReactDOM.render(
        <div>
        <div>
            <h1>주제</h1>
            <ul>
                <li>React</li>
                <li>Vue</li>
            </ul>
        </div>
    </div>
        ,document.querySelector('#root')
    )

이렇게 줄여든다.즉

ReactDOM.render(넣고싶은html요소 ,document.querySelector('#root'))

넣어버리면 끝이다 이게 바벨의 힘이다 만세 

 

다음 script 내부내용 지우고

 // function Com(props){
    //     return (<div><h1>{props.message} 이것은 함수로 만든 컴포넌트</h1></div>);
    // }
    class Com extends React.Component{
        // state={
        //     count:0
        // }
        constructor(props){
            super(props);
            this.state={count:0};
        }
        render(){
            return(<div><h1>{this.props.message} 이것은 함수로 만든 컴포넌트</h1><p>{this.state.count}</p></div>);
        }
        componentDidMount(){
            setTimeout(()=>{
                // this.setState({
                // count:this.state.count+1
            //})
            this.setState((pre)=>{
                    const newst={count:pre.count+1}
                    return newst;
                })

            },1000)
           
        }
        static defaultProps={
        message:"기본"
    }
    }
    //기본갑 설정
    Com.defaultProps={
        message:"기본"
    }
    ReactDOM.render(<Com message="hi" />,document.querySelector("#root"))
  넣어버리자 이번에는 집중하자

npx serve 로 켜놓은 창은 이렇게 된다.

요롷게 된다

function Com(props){
        return (<div><h1>{props.message} 이것은 함수로 만든 컴포넌트</h1></div>);
    }
 이부분 괄호안에 props가 뭔지 모를것이다.  저기는 함수를 부를때 같이 전달해주느 데이터를 보관하는 변수라고 생각하면 된다.

헤까릴수 있으니 class 내부에 있는것을 하나씩 따로 빼와서 설명하겠다

state={
            count:0
        }
요거 state 한국어로 상태 즉 클래스 내부에서 변수를 만들어서 값을 저장할려면 여기안에서 만들고 저장해야 한다.
그래야지 클래스에서 쓸수 있다.
 constructor(props){
            super(props);
            this.state={count:0};
        }
이거는 constructor 생성자 즉 클래스를 생성하는 순간 실행되는 함수다
super 이건 즉 클래스가 상속 받아을때 상속을해준 그데이터들을 사용하기 위해 쓰는거다 그래서 전달받은 요소를 수정하는 데이터일수도 있어서 전달받은 데이터를 같이 보내준다.
this.state={count:0};여기서 this를 씀으로써 부모클래스가 아닌 자기자신 클래스인것을 알 수 있게 해주고
자기자신의 state에 count:0이라는 것을 만들어 주는 거다
사실상 count의 기본값을 0으로 해주는거다
componentDidMount(){
            setTimeout(()=>{
                // this.setState({
                // count:this.state.count+1
            //})
            this.setState((pre)=>{
                    const newst={count:pre.count+1}
                    return newst;
                })

            },1000)
           
        }

componentDidMount이거는 컴포넌트가 특정지역에 적용될때 실행되는 함수다 단순히 자동으로 실행된다고 이해해도 지금은 문제가 없다.

setTimeout(실행할것,시간)이거는 시간에 적힌 숫자 만큼 지나가 실행할것이 실행 된다. 시간의 단위는 ms 1000=1초

const newst={count:pre.count+1}이건 헤깔리수 있다 설명 하겠다 pre는 위에서 설명했듯이 내가 만든 전달받은 데이터를 저장할 변수이다. newst라는 변수에 이름이 count 이고  전달받은데이터를 저장한 변수 pre에 있는 count의 내용에 1을더한값을 내용으로 저장한다. 즉 pre.count가 1이면 count:2  라는 것이 newst 에 저장된다.

즉 위에꺼는 1초후에 count값에 1을 더해준다.

 static defaultProps={
        message:"기본"
}
 Com.defaultProps={
        message:"기본"
    }

이거 두개는 똑같은 거다 

위에꺼는 클래스 내부에서 전달받는값중에 message라는 값의 기본값을 정해주는거고

밑에꺼는 클래스 외부에서  전달받는값중에 message라는 값의 기본값을 정해주는거다

ReactDOM.render(<Com message="hi" />,document.querySelector("#root"))
여기서는 이게 이해가 안될것이다
<Com message="hi" />
message="hi"이게 뭐냐 message라는 이름으로 데이터hi를 전달해주는거다 만약 이게 없으면 위에 기본값 설정해준거 때문에 message="기본" 이 될거고  출력되는 글자는

hi 이것은 함수로 만든 컴포넌트

이거에서

기본 이것은 함수로 만든 컴포넌트

로 바뀔것이다.

message="hi"는 createElement(태크,이름:내용,작성할내용)에서 두번째요소인 이름:내용 이것과 유사하다고 생각하면 된다.