React를 이용한 Counter 만들기 (1)

먼저, 대체 React가 왜 필요해? 왜 배우는거야?를 깨닫기 위해  바닐라 js를 이용한 Counter를 만들겠다.

 

바닐라 js란?

외부 라이브러리나 프레임 워크를 쓰지 않는 순수 javascript를 일컫는다.

 

Case A. div, button 이벤트를 이용한 Counter

 1.body에 div#root와 btn#btn을 만든다.

 

2. id가 root인 앨리먼트 내부에 <p>count</p>를 추가하여, increase 버튼을 누를때마다 count를 갱신한다. 

•   const root : root값을 선언하기 위해  div의 id인 'root' 입력. id 넣을 때는 'getElementById' 사용 
•   const button : button 값 선언하기 위해 class명인 'button'을 입력. class를 이용할 때는 querySelcetor 입력
•  let을 이용하여 count 값을 0으로 초기화
• root안의 innerHTML을 <p>태그를 이용하여 0으로 입력한다.
• button에 이벤트를 추가하기 위해 addEventListener 화살표 함수를 이용한다. 
• click하면 root안의 0이 증가할 수 있게 ++count와 p태그를 Template literal을 해준다.

 

Case B. innerHTML,count 변수,<P> count </p>를 갱신하는 Counter

          -> increase 버튼이 클릭되었을 때마다 특정 함수가 호출되면서 <p> count </p>를 작성

 

 

1. 초기값 설정

 

• console.log ( ' 앨리먼트 업데이트') 는 출력이 되지 않는다.

    왜냐하면 return은 '값'을 반환하는 메서드이기 때문이다

• this는 component를 참조한다. 

 

2. 브라우저 렌더링 (초기 화면을 렌더링 해주는 함수)

  

• 렌더링이란 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정을 말한다. 
• Render 메서드에 인자값으로 초기값 component와 이를 적용할 html element를 넣어 초기화면을 렌더링한다.
• 1단계에서의 component와  여기의 component는 명칭만 같을 뿐, 의미는 다르다.
• element는 모든 h태그를 말한다.

• 랜딩함수에 root div를 넣어준다.
• button 에 화살표 함수를 이용하여  click하면 count가 1씩 증가하는 이벤트를 입력한다.

 

Case B 총 정리