전체 글 썸네일형 리스트형 리액트 _18_React_memo, callback https://wastetime.tistory.com/33 **이 포스팅에 이어서 진행합니다. 리액트 _17_React_검색창 만들기 **이 포스팅에 이어서 진행합니다. https://wastetime.tistory.com/30 리액트 _16_React_useState, useEffect 1. public 밑에 music.json을 붙여넣는다. 2. index.html에 css를 넣는다. 클래스로 container 도 적.. wastetime.tistory.com 검색창에 글씨를 쓸 때마다 제목 색이 변경되게 해보자 H 변수에 색을 배열로 넣고 Math.random으로 랜덤으로 색이 나오게 적은 뒤 style안에 color를 넣는다. //Memo 기능 사용 const H = () =>{ const col.. 더보기 리액트 _17_React_검색창 만들기 **이 포스팅에 이어서 진행합니다. https://wastetime.tistory.com/30 리액트 _16_React_useState, useEffect 1. public 밑에 music.json을 붙여넣는다. 2. index.html에 css를 넣는다. 클래스로 container 도 적어.. wastetime.tistory.com 1. 위에 검색창을 하나 만든다. 2. 이벤트 컨트롤을 할 수 있는 변수를 만든다. * e.target.value 를 이용해서 내가 검색창에 입력한 값에 이벤트를 준다. 3. 검색창 input 부분에 onChange 이벤트를 준다. 검색창에 쓴 값이 콘솔에 찍히는 것을 확인 할 수 있다. 4. 새 js파일을 만들어서 useState,useEffect,useCallback,u.. 더보기 리액트_webStrom git 연동하기 1. git을 다운로드 받는다. window로 깔면 된다. https://git-scm.com/downloads Git - Downloads Downloads Mac OS X Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several third-party tools for users looking for a platform-specific git-scm.com 2. exe 파일 실행한 다음에 모두 next 하고 install한다. 3. 재부팅한다. 4.. 더보기 리액트 공부할 때 참고자료 보호되어 있는 글입니다. 더보기 리액트 _16_React_useState, useEffect 1. public 밑에 music.json을 붙여넣는다. 2. index.html에 css를 넣는다. 클래스로 container 도 적어준다. 3. 파일을 가져와야 하기 때문에 package.json에 axios를 import 해준다. 4. App2.js에다가 music.json에 있는 값을 get으로 가져온다. * let은 완전한 지역변수를 만들어줄 때 사용한다. 딱 속해있는 function 안에서만 사용할 수 있다. import React from "react"; import axios from "axios"; function App2() { let music=[]; axios.get('http://localhost:3000/music.json').then((res)=>{ music=res.data;.. 더보기 리액트 _15_React_prop 사용법_2 1. index.js에서 const로 고정변수를 만들어주고 태그 안에 만들어준다. 2. App.js 에서 props.msg라고 하면 출력이 된다. 결과) 3. split를 이용해서\n으로 나눠보자 나누면 배열로 되어있으므로 map으로 만들면된다. 결과) 더보기 리액트 _14_React_prop 사용법 1. 프로젝트를 하나 만든다 (this window) 2. index.js에서 값을 넘겨준다. 3. App.js 에서 props를 받도록 ()안에 적어주고 {}안에 props.name 이렇게 넣어주면 된다. 4. 터미널에서 npm start 하면 이렇게 창이 뜬다. 더보기 리액트 _13_React & Redux 특징 React 1. 화면 UI (빠르게 화면에 출력됨) - JSX - XML 1. 최상위루트 2. 여는태그 닫는태그 동일 3. 속성값은 ""로 적기 4. style대입할 때 4_1. 외부CSS : className 사용 4_2. 내부CSS : style ="display:block" - 계층구조 -> 트리형태 - DCM 2. 데이터 관리 - props(속성) 값으로 데이터 이동 (태그 형식으로 호출해야한다) ---------> 고정된 값 전달 시 사용 - state : 외부(서버)에서 데이터 값 받아서 node.js 또는 spring으로 처리 ----> 변경되는 값 전달 시 사용=> HOOKS 3. 가상 DOM: 원본과 비교했을 때 바뀐 부분이 있으면 변경되는 것이기 때문에 자연스럽게 바뀜. 화면 깜박임 없.. 더보기 이전 1 2 3 4 5 6 7 다음
