React 13

[React]3. State

React_03_State State: 컴포넌트 내부에서 관리되는 변경이 가능한 데이터 변수와의 차이점: 값 변경 시 화면에 바로 렌더링이 됨(화면에 적용) - JS 문법에서는 화면에 접근하는 렌더링 코드를 별도로 작성해야 함 State 사용방법 ①State import: import {userState} from 'react'; ②State 선언: const [변수이름, set 변수이름]=useState(초기값) ③State 값 변경: set변수이름(변경값) [실습1]버튼 클릭하면 숫자 증가시키기 [실습2]좋아요 실습: 하트 클릭 시 빨간 하트로 변경, 좋아요 개수 증가 [실습3]랜덤게임: 버튼 클릭 시 랜덤 수 출력되고 선택한 버튼의 숫자와 비교하여 결과 출력 *실행순서가 State 선언 부분-ret..

React 2023.08.14

[React]2. 컴포넌트

React_02_컴포넌트 [리액트 단계] 서버 실행하기 2. JSX 파일 만들기: 기본 jsx 구조 3. index.js에서 jsx 파일 import하기: 브라우저에서 보여지는 파일 변경하기 [실습1] //1. 사용자에게 이름 입력받기 var name=prompt("이름을 입력해주세요"); console.log(name); // 2. 현재 날짜 가져오기 let today=new Date(); console.log(today); // case A: 연도-월-일 형태 ->toLocaleDateString() var date=today.toLocaleDateString() console.log(today.toLocaleDateString()); //case B: 현재 월 ->getMonth() // *컴퓨터는..

React 2023.08.10

[React]1. JSX 문법

React_01_JSX문법 리액트: 자바스크립트 라이브러리. 사용자 인터페이스를 만들기 위해 사용 자바스크립트의 단점 html과 js의 분리감→jsx로 html과 js문서 통합 직관적이지만 너무 긴 자바스크립트 문법 새 페이지를 들어갈 때마다 새로고침→Single Page Application(SPA)으로 개선 2. 라이브러리vs프레임워크 라이브러리: 이미 만들어놓은 기능을 사용하는 것 -버전이 업데이트되더라도 이전 버전과 호환이 잘 됨 프레임워크: 제공된 틀 안에 들어가서 주어진 규칙을 지켜 사용하는 것 3. 리액트의 역사: 페이스북 엔지니어 Jordan Walke가 개발 -원활한 커뮤니티가 형성되어 다양한 문서 제공 -React Native로 모바일 애플리케이션 제작가능 [환경구축] ◎Node JS:..

React 2023.08.08