React2일차-React 컴포넌트1

이제 시작이다 

터미널에 npx serve 치고 localhost로 인터넷 창 켜줘라 2일차  바벨 게시물 이어서 본다면  켜저있을 것이다

이게 시작화면

그리고 바디 젤상단에 

<div id="root"></div>  

<button id="btn_plus">+</button>

입력

이런식으로

 

이제 모든것은  여기에다 입력 한다 

컴포넌트에 대해 알아보자 우선

 const compo=props=>{

            return React.createElement('p',null,`${props.message}:${props.count}`)

        }

        ReactDOM.render(React.createElement(compo,{message:'update',count:1}),document.querySelector('#root'));

    document.querySelector("#btn_plus").addEventListener('click',()=>{

        ReactDOM.render(React.createElement(compo,{message:'update',count:5}),document.querySelector('#root'));

    })

이걸 복사해서 붙여 넣어보자 그리고 저장

이런식으로 나올거다

npx serve 로 켰다 local host 창을 열어서 새로고침하면 이런식으로 나올거다  만약 안나오면 오타거나 저장안했을것이다

버튼 클릭전

그다음 저기 +이거를 누르면  이런식으로 변한다

버튼 클릭후

이제 정확하지느 않지만 내가 이해한대로 코드를 뜯어서 해석하겠다 (내해석이 정확한거아닌고 내나름대로 해석한거다)

 const compo=props=>{

            return React.createElement('p',null,`${props.message}:${props.count}`)

        }

 

함수이름=변수이름=>{함수내용}= 기본 형식이다

 

const =불변 다른곳에서 바꿀수 없다 는 뜻이다

compo=이건 함수 이름 그냥 내가 아무거나 적은것이다 이름 정하는 규칙에 따라 다른거 넣으면 상관없다그냥 영어로 해라 밑에 링크가면 규칙 적혀있다

https://velog.io/@vome/%EB%B3%80%EC%88%98Variable-%EB%AA%85%EB%AA%85%EA%B7%9C%EC%B9%99

props= 이건 내가 전해지는 첫번째 데이터를 props라는 이름으로 저장하겠다 라는 의미다 이름 바껴도 상관없다

물론 위에있는 링크의 규칙은 정하면서 적어야된다 %^&%*$^@#%이런거 안된다

return= 이거 뒤에 나오는건 밖으로 전달하겠다는 의미이다 즉 변수에 담을수 있다는것이다. (;이게나오면 return이 끝이다)

return위에 적는것은 이함수를 부르면 실행은 되겠지만 전달은 안된다. 즉 변수를 만들어서 그안에 담을수는 없다.

ex)const hello=compo(); 이런식이면 return 뒤에있는건 hello에 저장이 되지만 그위에 꺼나 return이끝나고 나서 나오는것들은 저장이 안된다.

 

React.createElement=React라는요소 안에있는 createElement라는 함수를 가져와쓰겠다 이말이다

('p',null,`${props.message}:${props.count}`) = 이거는우선 createElement의 기본구조를 알아보겠다.

 

 

createElement(

넣어줄 태그 이름(ex. div,p,h1,등등또는 자기가 만든 아무거나 된다 영어로 만들면 된다 fddfda이런것도 된다),

전달해줄 데이터 이름과 내용 '이름:내용' 이런식으로 적어주면 된다. 여러개면 ', ' 를 넣어주면된다,

태그 안에  적어줄 내용 또태그를 넣어도 되고 글자를 넣어도된다.

)

 

 

createElement('태그이름',이름:내용,'적어줄내용') 이런식이다.

 

즉,return React.createElement('p',null,`${props.message}:${props.count}`) 

는 React안에 있는 createElement라는 것으로 만든 무언가를 반환해주겠다 

전해줄 데이터는 없고 `${props.message}:${props.count}` 내부에 이걸 넣어주겠다

props.어쩌고는 변수 이다. 저 글자를 전해주느게 아니고 저글자에 저장된 값을 보내주는거다

 

이제 ReactDOM.render(React.createElement(compo,{message:'before',count:1}),document.querySelector('#root')); 

이부분 설명 하겠습니다.

ReactDom=이거는 좀 정확하지 않지만 만들기는 하는데 실체하지않는것을 만들고 다쓰고 없애버리겠다

즉 편의를 위해 뭔가를 가상으로 만들겠다 이런겁니다 이렇게 이해하면 편하더라고요

ReactDOM.render=ReactDom안에 있는render를 사용하겠다 라는 말입니다. 다음부터 이런 부분은 생략하겠습니다

ReactDOM.render(실행할내용,적용할범위)=이런 형식이다 적용할 범위에 내용을실행해서 넣겠다 이런 말이거든요

document.querySelector('#root')= 이거는 괄호안에 적힌것과 연관된 공간을 선택 하겠다  라는 뜻이고

괄호 안에는 드가는건 태그 가 드갈수있고 #을 붙이고 그뒤에id이름을 넣을수 있고 .을 붙이면 class이름을 넣을수 잇습니다. id와 class가 뭐냐  createElement 에서 두번째꺼가 이름:내용  이였습니다. 여기서 이름이 class or id 인거라고 생각하시면 됩니다. 즉 <div class="내용1" id="내용2"></div> 여기서 클래스 는 내용1 이고 id는 내용2 입니다.

 

즉 종합적으로 compo라는 가상으로 만들고 message:'before',count:1이런 데이터를 넘겨주고 내부에는 `${props.message}:${props.count}` 라는 글자를 적어주는데  props안에 message:'before',count:1이게 저장된다.

그래서 propss.message는 before 이고 props.count는 1이된다 즉 before:1 이 출력이 된다.

그리고 가상 compo는 지워지고 <p>before:1</p> 이렇게 되고 가상으로 만든것이 사라진다.

 

 

    document.querySelector("#btn_plus").addEventListener('click',()=>{

        ReactDOM.render(React.createElement(compo,{message:'update',count:5}),document.querySelector('#root'));

    })

이거는 위에 설명했던 부분은 생략 하겠습니다

 document.querySelector("#btn_plus") 이건설명했서 패스

addEventListener('이벤트명',실행할내용)=앞에있는 지역에서 적혀있는 이벤트명이 발생하면 실행할 내용을 실행하겠다 라는 것이다.

즉 여기서는 id가btn_plus공간에서 클릭 이벤트가 일어나면 

ReactDOM.render(React.createElement(compo,{message:'update',count:5}),document.querySelector('#root')를

실행하겠다 이말이다. (ReactDOM이부분은 위에 설명했으니 생략 글자만바뀌고 다똑같다)