front-end/리액트11 [리액트 ] useState useState 버튼을 클릭할 때마다 count가 증가되는 코드를 만들어보겠습니다. 버튼 클릭할 때마다 ui가 업데이트 되게 하려면 state를 씁니다. state는 일반 변수 만드는 것처럼 만들지 않습니다. 1. import : import React, {useState} from 'react'; 를 import 해줍니다. 2. useState 생성 : const [count2, setCount2] = useState(0) useState(0) 에서 0은 초기값입니다. useState(5)라고 하면 5가 초기값이 됩니다. return부분에 state:{count2} 라고 쓰면 서버에 state:5라고 나타납니다. useState라는 함수는 array를 반환합니다. array에는 아이템이 두가지 들어있습.. 2023. 3. 29. [리액트] ex6문법) 화살표 함수 Arrow function Arrow function https://webclub.tistory.com/649 블로그 참조 화살표 함수(Arrow function) 이 글은 [인프런] Javascript ES6+ 제대로 알아보기 - 초급(정재남)를 토대로 작성되었음을 알려드립니다. Arrow Function(화살표 함수) 다음의 ES5 의 함수 표현식과 es2015 의 화살표 함수를 비교해 보도록 webclub.tistory.com https://www.youtube.com/watch?v=5kRgzyGRPrU&t=182s 유튜브 참조 새로운 문법인 화살표 함수가 생겼습니다! 기존 함수보다 훨씬 간편하게 사용할 수 있는 문법인 화살표 함수를 리액트에서는 적극적으로 활용합니다. +++ 리액트에서는 클래스 메소드를 화살표 함수의 형태로.. 2023. 3. 29. Restful과 React 이해하기 기존의 Restful 구조 컨트롤러의 지위가 약해졌습니다. 컨트롤러가 무조건 짐을 가지고 떠났던 건 mvc패턴이고, 이제는 컨트롤러에서 짐만 주게 됩니다. 다시 리액트에서의 Restful구조를 보겠습니다. 리액트의 Restful 구조 컴포넌트들은 각각의 js로 만들 수 있습니다. 프로젝트 만들기 프로젝트는 대문자로 만들면 오류가 나므로, react-sample 이라고 만들겠습니다. 리액트란? Single View Application 페이스북 및 커뮤니티가 개발한 UI를 구축하기 위한 자바 스크립트 라이브러리이다. 데이터를 업데이트(변경)하는 것으로 자동으로 html을 업데이트해준다. class - > className 으로 사용한다. hook 2023. 3. 28. [리액트] 생활코딩 - 컴포넌트, props, 이벤트(이벤트 미완성) https://www.youtube.com/watch?v=s3cDPbcoy_4&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=6 컴포넌트 복잡한 태그를 하나의 태그로 이름을 붙여서 컴포넌트(사용자 정의 태그)를 만들기 소문자 header는 html에 기본적으로 내장되어 있는 태그입니다. 이 header와 똑같은 이름의 사용자 정의 태그를 만들 건데, 사용자정의태그를 만들 때는 함수를 정의하면 됩니다. 리액트에서 사용자 정의 태그를 만들땐 반드시 대문자로 시작해야 합니다. 먼저, function Header 함수를 만들고 이 함수는 return값으로 html 코드를 return하면 됩니다. 따라서 html의 태그를 Header함수 밑으로 옮겨주고 return 값으로 지정.. 2023. 3. 10. [리액트] 생활코딩- 리액트 설치, 특징, 배포, 함수 형태 리액트 설치 1. node.js설치 2. vsCode 설치 - https://code.visualstudio.com/#alt-downloads - 64비트 3. 한글로 설치 4. 보기- 터미널 리액트 특징 * Router를 통해서 안에 있는 화면을 바꿔줍니다. * 자바스크립트를 사용하지 않습니다. * hook을 지원합니다. * 싱글뷰 application이라고도 한다. index.html 한장으로 사용합니다. 실행 과정 & 구조 1. 터미널 열기 2. 폴더 생성 : npx create-react-app 폴더이름 입력 ex) npx create-react-app begin-react 3. 개발환경 실행 : npm start 4. 서버 끄기 : ctrl+C 누르면 서버 끌 수 있습니다. 5. 현재창/ 새창 .. 2023. 3. 7. 이전 1 2 다음
