본문 바로가기

Cod-ing/React

(3)
[React] useState를 알아보자 리엑트를 공부하며 알게된 기능 중 useState를 정리해보자. useState는 구성요소에 상태변수를 추가할 수 있는 React Hook 이다. 일단 useState를 사용하기위해선 react의 다양한 Hook들 중 useState를 호출해주어야한다. 쉽게 말하자면 리엑트 안의 해당 기능을 내 프로젝트로 가져오는것 //useState import시키기 import { useState } from 'react'; //useState 선언 const [state, setState] = useState(initialState); JavsScript를 알고계신다면 익숙하실 구조분해할당으로 useState에 변수를 지정해주었다 👍 구조분해할당 알아보기 initialState: 초기상태값. 최초 랜더링 시 보여질..
[React] 리엑트를 설치하는 방법 지난번 블로깅 내용에선 리엑트를 간단하게 방식으로 가져올 수 있다는 것을 알았다. 지난번 블로깅 내용 확인하기 이번엔 터미널에서 명령어를 사용해 설치하는 방법을 알아보자! 1. 설치 전 사전준비 리엑트를 설치하기전 Node.js를 먼저 설치해야한다. Node 홈페이지에 접속하면 메인화면에 두가지 다운로드 버튼이 뜬다. LTS : Long Term Support의 약자로 장기지원되는 버전 현재버전 : 가장 최신버전으로 언제든지 기능이 생기고 사라질 수 있다. 약간 카카오톡 실험실 같은 느낌..? (개발 중 기능이 사라지면 소스코드를 재수정해야하는 일이 생길 수 있음😥 ) 안정성이 높은 LTS를 설치하는게 좋다! Node.js 설치하러가기 설치가 완료되었다면 터미널에 node -v를 입력하여 설치되어있는 n..
[React] React를 공부해보자 리엑트는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. react는 인터렉티브웹을 위한 최적의 도구 html을 작성 후 이벤트를 등록하는것이 아니라 script 내부에서 html을 생성 후 ReactDOM에 삽입하는 형태로 이루어진다 React를 간단하게 사용할 수 있는 방법은 두개의 URL을 import 시킨 후 스크립트를 작성하는 것이다. //React 기능 //ReactDOM 이걸 보면서 jQuery가 생각이 났다. jQuery는 JavaScript의 여러 메소드들을 간단하게 사용할 수 있게 해주는 라이브러리라면 React는 여러번 사용되는 html 코드를 매번 작성할 필요가 없게 해주는 코드 캡슐화가 주 기능인 것일까? html을 여러번 반복해서 작성하지 않아도 된다니.. 생..