Javascript/React
react.js 공부 useState 데이터 정렬하기 #4-1
해당 내용은 유튜브 코딩애플님의 채널에서 공부하여 작성된 내용임을 밝힙니다. 자바스크립트 정렬에는 sort함수를 사용한다. function 정렬바꾸기(){ //useState는 직접 변경이 불가능하기 떄문에 특정 변수에 값을 복사한다음 진행한다. var newArray = [...글제목]; newArray = newArray.sort(); 글제목변경(newArray) } 여기서 sort함수에 대해서 더 공부하게되었는데, codingbroker.tistory.com/41 위 주소의 글을 읽고 공부한 내용을 적는다. const arr = [5, 100, 20]; console.log(arr); // [5, 100, 20] 이런 배열이 있을때, sort함수를 사용하게되면, 문자열로 변환되어 숫자의 크기와는 상..
react.js 공부 state 수정 #4
해당 내용은 유튜브 코딩애플님의 채널에서 공부하여 작성된 내용임을 밝힙니다. onClcik={ 제목바꾸기함수( ) } 이때 함수에 괄호를 붙히면 바로 실행되기 때문에, 바로 실행이 아닌경우 괄호는 제외해야 한다. 리액트에서 useState로 생성된 데이터를 수정하기 위해선 특정 함수에 데이터를 복사한 다음 수정 후 변경 함수를 사용하여 수정하는 식의 진행이 좋다. 이러한 방식을 '리액트 대 원칙 : immutable data'라고 부른다. let [글제목, 글제목변경] = useState(['남자 코드 추천','신제품 후기','음악 들어본 후기']); var newArray = 글제목; 위와 같이 작성하는건 값을 복사하는게 아니라 값 공유이다. 똑같은 값을 공유하는거다. (refernce data typ..
react.js 이벤트 리스너/state 변경 state #3
해당 내용은 유튜브 코딩애플님의 채널에서 공부하여 작성된 내용임을 밝힙니다. warning ...라고 뜨는건 잘못된 코딩 습관에 대해 안내해주는 것이다. 이를 안보이게 하고 싶을 경우 최상단에 /* eslint-disable */를 써주면 된다. 함수를 정의할때 function 어쩌구(){ } 형식으로 적었는데, 이 형식을 ()=>{} 로 줄여도 되도록 업데이트 되었다.(자바스크립트 해당) 이벤트 리스너 onClick={ ( )=>{ } } onClick={ 함수 } state값을 변경하는 방법 - useState로 생성한 [a,b] 중 b를 사용한다. 예를 들어 a에 데이터가 존재하는 경우 b(10)를 실행시키면 a의 데이터는 10이 된다.
react.js 공부 state #2
해당 내용은 유튜브 코딩애플님의 채널에서 공부하여 작성된 내용임을 밝힙니다. React 에 내장함수를 사용할 때 import React, { useState } from 'recact'; = React에 있는 useState라는 내장함수를 사용하겠습니다. ES6 destructuring 문법 var [a,b] = [10, 100]; a에는 10일 b에는 100을 넣겠다. state 1.변수 대신 쓰는 데이터 저장공간 2.useState()를 이용해 만들어야함 state만들기 useState("남자 코드 추천") 는 즉 [a,b]가 있다면 ["남자 코트 추천", 정정해줄 데이터]를 만드는 것이다. state를 쓰는이유 웹이 app처럼 동작하게 만들고 싶어서(클릭해도 새로고침안되고 화면에서 이동) HTML이..
react.js 공부 시작하기 #1
해당 내용은 유튜브 코딩애플님의 채널에서 공부하여 작성된 내용임을 밝힙니다. [터미널] # npx 라이브러리를 설치를 도와주는 명령어 # create-react-app 프로젝트명 해당 폴더에 프로젝트명을 가진 리엑트를 설치한다. # npx create-react-app A 해당 폴더에 A라는 프로젝트명을 가진 리엑트를 설치한다. # src/app.js index.html에 속하는 메인의 요소임 속하게 만드는건 src/index.js에 있음 # npm start 미리보기 화면 시작 node.js는 왜 설치하는가? 1. create-react-app라는 라이브러리를 사용하기 위함 2. npm이라는 '툴'을 사용할 수 있음 * npm이란? 부트스트립이나 제이쿼리 같은 라이브러리를 쉽게 설치할수 있게 해줌 JS..