전체 글104 [리액트] hook :useState, useEffect, useContext 1. useState 최종목적은 변수관리입니다. 변수 사용할 때 무조건 사용해야 합니다. 예제1) function App() { //const는 외부의 접근 차단하기 위함 (보호) -> 컴포넌트 안에서만 접근이 가능하다. const [state, setState] = useState('click'); //getter, setter 초기값 //state = "새로운 값"; // 상수에 대입 불가 -> const변수라서 !! //setState("새로운 값"); //다시 초기화 불가능 -> const변수라서 !! //getter만 사용할 수 있는것임. console.log(state); function btnClick(){ setState('클릭했음'); } btnClick()으로 하면 Too may rer.. 2023. 3. 30. [리액트] map개념, map활용하기 예제1) 리스트를 map으로 가져오기 이런 기본 형태의 리스트를 map으로 표현해보기 function App(){ return ( Apple Pear Banana ) 🎀map으로 표현하기 const arr = ['Apple', 'Pear', 'Banana']; //중요> index를 추가하고 index를 키값으로 설정하면 중복 방지되어 경고 사라짐 //원래는 그냥 data만 넣어도 배열이 잘 나옴. const datalist = arr.map((data, index) => ({index} {data})) return ( {datalist} ) } 경고문 : map으로 리스트를 가지고 올 시에는 중복되지 않아야한다. 즉, 고유한 키값을 가지고 있어야 한다. 따라서 index를 추가하고 index값에 key.. 2023. 3. 30. [리액트] 일정관리 만들기 - MAP, 컴포넌트, props, event https://www.youtube.com/watch?v=qcphnSqneE0&list=PLKvVQ9ZQzjVkP0xd30Zi90P4S_rTlm-LH&index=1 리액트 한번에 이해 https://www.youtube.com/watch?v=TjUju3aUIDM&list=PLKvVQ9ZQzjVkP0xd30Zi90P4S_rTlm-LH&index=6 일정관리 만들기 위 강의를 참조해서 필기했습니다. 일정관리 페이지 만들기 아래와 같이 App.js + TodoBoard.js + TodoItem.js 3개의 컴포넌트를 각각 다른 파일에 만들었습니다. (css는 추가하지 않았습니다) 🎈🎈App.js import './App.css' import React, {useState} from 'react'; import.. 2023. 3. 30. [리액트 ] 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. 이전 1 ··· 4 5 6 7 8 9 10 ··· 18 다음
