본문 바로가기
728x90
반응형

Languages/React

[React] 2-1. State
Languages/React 2022. 1. 8. [React] 2-1. State 0. State 현재 리액트를 통해 버튼을 클릭했을 때 클릭한 횟수만큼 화면에 출력하는 어플리케이션을 만들고 있다. 이를 위해선 당연히 클릭 횟수를 저장하는 공간이 필요하다. 좋지 않은 방법과 좋은 방법이 있다. 좋지 않은 방법부터 살펴보자. 1. Bad 클릭 횟수를 저장하는 변수 counter를 생성한다. React에서는 {}를 통해 변수를 그대로 html에 출력시킬 수 있다. 클릭 시 counter를 증가시키는 countUp 함수도 생성한다. 다음 버튼을 클릭할 때마다 countUp을 실행한다. 그러나 버튼을 아무리 클릭해도 숫자는 증가하지 않는다. 실제로 counter는 증가하고 있는데도 말이다. counter는 증가하지만 화면 새로고침을 하지 않기 때문에 초기화면 그대로 유지되는 것이다. 즉 버튼..
[React] 1. React 기본
Languages/React 2021. 12. 12. [React] 1. React 기본 1. Application with Js React를 본격적으로 공부하기에 앞서 Js와 비교를 통해 React의 강력함을 느껴보자. 먼저 아주 간단한 Js 어플리케이션을 만든다. 버튼을 클릭하면 몇번 클릭했는지 세는 어플이다. 코드는 다음과 같다. Total clicks : 0 Click me 버튼을 클릭하면 몇번 클릭했는지 세어주는 어플이다. UI도 매우 간단하다. 이 어플을 만들기 위해 했던 과정을 "굳이" 일렬로 표시해보자. html에 문자열과 버튼을 생성한다. js에서 클릭 횟수를 세기 위해 counter 변수를 생성한다. button객체를 getElementById를 통해 가져온다. 버튼 클릭 이벤트를 받는다. 클릭 이벤트마다 수행하기 위한 함수를 만든다. span을 querySelector를 ..
[React] 0. React
Languages/React 2021. 12. 12. [React] 0. React 1. 왜? 왜 React를 공부하기로 시작했는가 물어본다면 여러가지 이유가 있을 것이다. 오랫동안 유지되는 좋은 언어라서? 많은 대기업에서 사용하기 때문에? 커뮤니티 활성화가 잘되어 있어서? 취업에 도움이 되니까? 등등 다 맞는 말이다. 가장 큰 이유는 프론트엔드 언어 중 가장 강력하다고 생각했고 호기심이 들었기 때문이다. Vue를 공부하고 프로젝트를 완성하면서 프론트엔드 개발자가 되고 싶다는 생각이 강하게 들었고 새로운 프론트엔드 언어를 공부하고 싶다는 갈망이 있었다. 개발자 입장에서 한 언어를 공부한다는 것은 하나의 모험이 될 수 있다. 특히 취준생이라면 더더욱 그렇다. 어떤 언어를 공부한다는 것은 짧든 길든 시간을 투자하는 것이고 해당 기술 스택이 오래도록 유지될수록 개발자로서 가치는 커진다. 앞으..
728x90
반응형

티스토리툴바