react4 React : study(4) { React State } State react의 변수 역할 state가 바뀌면 화면을 새로 렌더링해준다 import { useState } from 'react'; state 속성을 사용하기 위해서는 리액트 패키지에서 useState 함수를 불러와야 한다 const [num, setNum] = useState(1); parameter로 초기값( == 1)을 전달 받은 후 함수가 실행되고 나면 결과 요소를 값 2개 배열 형태로 반환한다 ※ 배열의 두 요소 중, 1번째는 state, 즉 현재 변수의 값의 이름을 지어준다 2번째는 setter 역할의 메소드 명을 지어준다 -> 이 메소드를 호출할 때 마다 state가 바뀐다 해당 속성을 적용하기 위해서는 변수를 컴포넌트에 명시 state로 만든 {num}에 적용하여 변수가 바뀔 때 마.. 2023. 2. 8. React : study(3) { React Component, Props, Children } React Element 리액트로 화면을 그려내는데 가장 기본적인 요소 jsx 문법을 javascript 변수에 담아 활용할 수 있다 const root = ReactDOM.createRoot(document.getElementById('root')); const element = Dice Game; console.log(element); root.render(element); console에 기록한 element 변수의 값을 보면 결과적으로 javascript 객체로 반환하는 것을 확인할 수 있다 이를 React Element라고 한다 React Component React Element를 이용하여 커스텀 태그를 만들수도 있는데, 이를 React Component라고 한다. 본격적인 React 개발에서.. 2023. 1. 25. React : study(2) { React JSX, Fragment } JSX 하단 코드처럼 js 파일 안에 HTML을 섞어서 쓸 수 있는 리액트의 확장 문법 root.render(실행 테스트); HTML 태그를 선언할 뿐만 아니라 id, className 등의 속성도 추가할 수 있다 ※ className : js 내 객체를 뜻하는 class와의 구분을 위해 HTML의 class 속성을 className이라 칭한다. 마찬가지로 for 역시 htmlFor로 사용한다. root.render( 실행 테스트); Fragment jsx 문법에서는 상단 예시처럼 1개의 태그에 한해서만 속성을 추가할 수 있다. 하지만 두 개 이상의 태그에 대해 속성을 추가한다면? 그럴때 fragment를 사용한다 import { Fragment } from 'react';// import 필요 (하단에.. 2023. 1. 21. React : prepare() { React를 위한 준비 사항 - node, npm, React Developer Tool 설치 } 2주 동안 리엑트 공부를 벼락치기 해보자고 다짐했다. 시적 전 React 공부를 위한 준비사항 #node #npm #React Developer Tool 총 3개를 설치하였다 homebrew 를 이용한 node, npm 설치 생각보다 설치 시간이 굉장히 오래 걸렸다 brew install node 정상 설치 확인 node -v npm -v 크롬에서 React 개발자 도구 확장 프로그램 설치 웹 퍼블리싱을 확인할 수 있는 개발자 도구처럼 현재 페이지에 있는 React 코드를 확인 가능하다 크롬 확장 프로그램 웹 스토어에서 React Developer Tool 추가 ↓ https://chrome.google.com/webstore/category/extensions Chrome 웹 스토어 Chrome에 사용.. 2023. 1. 19. 이전 1 다음
