React9 3. state (코딩애플) 데이터를 넣는 법 1.변수 2.state ( 자주 바뀌고, 중요한 데이터 저장할때 활용) state? 변수 대신 쓰는 데이터 저장공간 useState()를 이용해서 만들어야함 문자,숫자,array,object 다 저장가능 쓰는 이유? 더보기 변수는 변경되어도 자동 재렌더링이 안되지만 state는 변경되면 html이 자동으로 재렌더링됨 (새로고침 없이 변경됨) //App.js import React, { useState } from 'react'; // 해석 : react에 useState 라는 내장함수를 쓰겠습니다~ useState()를 이용해서 state 만들기 function App(){ let [state데이터,state데이터 변경 함수] = useState('data01','data02','dat.. 2021. 6. 21. 2. JSX 사용법(코딩애플) JSX : HTML 문법을 JavaScript 코드 내부에 쓴 것. "React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다." (나무위키曰) 즉, JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 주고 있다. return 안에 html 코딩하기. 1. 태그에 class 주기 : 예약어 class랑 겹치기 때문에 className 사용. css는 .App.css에서 코딩하기. (css하듯이 똑같이 하면 됨) JSX에.. 2021. 6. 21. 1.설치와 셋팅(코딩애플) node.js 설치(되도록이면 신버전으로, 안그럼 에러남) 편집툴 설치(vscode) 작업폴더 만들기 vscode 에서 작업폴더 열기 폴더 열었으면 터미널 열고 마지막줄에 작업폴더명 잘 뜨는지 확인 후 (ex : c:users/harry/어쩌구/저쩌구/작업폴더명 ) 아래 코드 입력 npx create-react-app 프로젝트명 npx : 라이브러리 설치 도와주는 명령어(nodejs 설치 잘 되어있으면 이용가능) create-react-app : 리엑트 셋팅 다된 boilerplate 만들기 쉽게 도와주는 라이브러리 그럼 작업폴더명 하위폴더로 프로젝트명 폴더가 생성. 프로젝트명 폴더 불러온 후 작업 시작 ※ 코드 실시간으로 보는법 : 터미널에 npm start 혹은 웹에서 호스트주소 입력 폴더 설명 Ap.. 2021. 6. 21. React 웹페이지 만들기(미완성) https://www.youtube.com/watch?v=I2UBjN5ER4s 1. 터미널에서 npx create-react-app react-website-yt-1 (툴체인 설치) 2. cd react-website-yt-1 (엔터) code . 입력 후 엔터 누르면 편집기가 켜진다. 3. 편집기 켜지면 터미널 -> npm start 해서 리엑트 켠 다음에 몇가지 라이브러리를 삭제한다. 그럼 다음의 화면이 출력된다. 4. 아래의 주소에 들어가서 이미지 다운로드 받기 https://github.com/briancodex/react-website-v1/tree/starter briancodex/react-website-v1 Contribute to briancodex/react-website-v1 deve.. 2021. 6. 15. 이전 1 2 3 다음
