React5 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 : study(1) { React 프로젝트 생성 } 강의 실습 예제인 주사위 게임을 구현해보는 것이 목표이다 react 프로젝트 생성 npm init react-app . 설치가 완료되면 아래와 같은 패키지 구조가 완성된다 개발 모드 실행 해당 디렉토리에서 명령어 입력 npm run start 샘플 화면이 만들어지면서 생긴 더미 이미지, 텍스트 등을 삭제하였다 하단 이미지처럼 public 디렉토리 내부 index.html src 디렉토리 내부 index.js 를 제외하고 더미 데이터를 모두 삭제하였으며 두 파일 내부에도 필요없는 코드들은 다 삭제하였다 ※ 필요없는 코드 정리 [ Git 으로 확인 ] https://github.com/KOO-YS/cramming-react/commit/b31559a02dd8a00a355527e2c7420e23eba572aa.. 2023. 1. 19. 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 다음
