프레임워크/React27 [React] location(defaultProps) → useLocation(hooks) 사용하기! 기존에는 useHistory 사용 시에 location을 사용해서 아래와 같이 데이터를 담아 이동하고 이동한 컴포넌트에서는 아래와 같이 데이터를 받아 사용 했습니다. 이럴 경우 파라미터로 {location} 받을 시 props를 받아오지 못하는 단점이 있었는 데 팀원분이 사용하시던 중 react-router-dom 패키지에 useLocation을 사용하면 파라미터로 props도 받을 수 있고! location 객체로도 데이터를 받을 수 있다고 알려주셨다! (아래처럼 사용하면 된다) 참고 사이트 https://velog.io/@yiyb0603/React-Router-dom%EC%9D%98-%EC%9C%A0%EC%9A%A9%ED%95%9C-hooks%EB%93%A4 React Router dom의 유용한 h.. 2021. 12. 31. [React] 가상돔, 라이프 사이클, 클래스 컴포넌트 라이프 사이클 : 컴포넌트가 웹페이지에 들어갔다가 사라지기까지의 과정을 말한다. 1) 가상돔이란? -> 바뀐 부분만 진짜 DOM에 반영하는 것 -> 메모리에 올라가 있는 눈에 보이지 않는 가짜 DOM에 변경 사항을 전부 넣어서마지막에 진짜 DOM에는 한번만 반영하는 것 : DOM은 html 단위 하나하나를 객체로 생각하는 모델입니다 예를 들면, 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있겠죠? 이런 구조를 트리 구조라고 합니다. DOM이 트리구조란 소리입니다. DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고, 수정할 걸 찾고, 싹 수정을 한다면? → 필요없는 연산이 너무 많이 일어난다! → 그래서 등장한 게 가상돔! 가상돔은 메모리 상에서 돌아가는 가짜 D.. 2021. 11. 15. [React] Component로 HTML 깔끔하게 줄이기 페이지 구분은 라우터를 써야 하지만 그건 나중에 배우겠다. 이번에는 Modal 창으로 띄우는 상세페이지를 만든다. return 안에는 여러개의 div 태그를 연달아 사용 할 수 없다. 복잡하고 어려운 div 지옥 -> HTML을 줄여서 쓸 수 있는 방법(HTML을 한 단어로 줄여서 쓸 수 있는 방법) : 리액트의 Component 문법을 사용한다. Component 만드는 법 1) 함수 만들고 이름 짓고 2) 축약을 원하는 HTML에 넣고 3) 원하는 곳에서 Component 유의사항 1) 이름은 대문자 2) return() 안에 있는 건 태그 하나로 묶어야 함 추가사항 1) return() 내부에 묶을 때 의미없는 쓰기 싫으면 , 를 사용하면 됨 2) Component를 만들면 관리가 편해짐 어떤 걸 .. 2021. 11. 5. [React] state 변경하는 법 (setState는 너무 옛날꺼야!) 리액트의 대원칙 : immutable data(직접 수정 하지 말고 복사해서 사용해라) state 데이터 수정 테크닉 수정된[데이터]를 만든다. 근데 state 복사본(deep copy)으로 해서 수정한다. (그냥 let newArray = 글제목은 값을 복사하는 게 아니라 공유하는 것이다.) deep coppy : 값 공유 X / 서로 독립적인 값을 가지는 복사 Array, Object state 데이터 수정 방법 - 일단 변경 함수를 써야 한다. - 변경함수(대체할 데이터) - state는 직접 건드리지 마라(재렌더링이 안될지도 모름) - deep copy해서 그걸 건드려라 Q. 버튼을 누르면 제목들을 글자순 정렬? 1) 일단 기본 state 카피본을 만든다. 2) 카피본 수정사항을 반영한다. 3) .. 2021. 11. 5. [React] 버튼에 이벤트 리스너(핸들러) 장착하는 방법 리액트 이벤트 리스너(핸들러) = 이벤트를 다루는 법 1. onClick = { 클릭 될 때 실행할 함수 } 2. onClick = { () => {실행할 내용} } Q. 따봉을 누를 때마다 콘솔창에 1이 뜨게 하려면? {글제목[0]} { console.log(1) } }>👍0 {date} Q. 따봉을 누를 때마다 1 증가 시키기 1) state를 변경하는 방법은 따로 존재한다. -> state 변경 함수를 사용하면 된다. -> 변경 함수(대체 할 데이터) {글제목[0]} { 따봉변경(따봉+1) } }>👍{ 따봉 } {/* onClick 함수를 사용해서 눌렀을 때 실행될 함수를 설정 해준다. 이때 state 함수를 사용해서 따봉을 불러오기 때문에 값을 변경 할 때는 따봉변경 함수를 사용해서 인자에 변경 .. 2021. 11. 5. [React] state(useState) 사용법 데이터는 1. 변수에 넣거나 2. state에 넣거나 두가지 방법이 있다. 리액트의 데이터 저장공간 state 만드는 법 1) { useState } 상단에 첨부 or useState 키워드 작성 시 자동으로 생성됨 2. useSate(데이터) -> [state 데이터, state 데이터 변경 함수] let [글제목, 글제목변경] = useState('남자 코트 추천'); -> destructuring 문법이다. -> 각각의 변수에 각각의 값이 들어간다. -> array, object에 있던 자료를 변수에 쉽게 담고 싶을 때 사용한다. state란? 1. 변수 대신 쓰는 데이터 저장 공간 2. useState()를 이용해 만들어야 함 3. 문자, 숫자, array, object 다 저장 가능 그렇다면 그.. 2021. 11. 5. [React] JSX 사용법 JSX라는 문법은 HTML처럼 생겼는데, HTML의 대용이라고 보면 된다 1. 태그에 class 주고 싶을 때는 사용이 불가능하다. -> 2. 리액트가 쌩HTML 코딩보다 편리한 이유 - 리액트는 데이터 바인딩을 쉽게 할 수 있다. - {변수명} or {함수명} or src, id, href 등의 속성에도 {변수명, 함수 등} (상상하는 모든 곳에 {}로 변수 집어넣기가 가능하다. (데이터 바인딩 : 데이터를 받아와서 자바스크립트로 저장해서 HTML에 박아 넣어서 출력하는 것) (데이터 바인딩이 쉬워지는 React, Vue, Angular 등이 있다.) 3. JSX에서 style 속성 집어 넣을 때 : 그냥 쓰면 안되고 object 형식으로 넣어야 한다. - style = { object 자료형으로 만든.. 2021. 11. 5. [React] 리액트 설치와 세팅 리액트 설치 / 세팅 - npx : 라이브러리 설치 도와주는 명령어(nodejs 설치가 잘 되어 있어야 이용 가능) - create-react-app : 리액트 셋팅 다 된 boilerplate 만들기 쉽게 도와주는 라이브러리 - blog : 프로젝트 이름 설치 후 src -> App.js가 main 페이지이다. 코드 짠 거 미리보기 띄우기 terminer -> 프로젝트명 확인 -> npm start 에러 발생 : ERR_OSSL_EVP_UNSUPPORTED라는 에러가 발생해서 찾아보니 node.js를 최신 버전으로 깔 지 말고 왼쪽에 있는 걸로 깔아야 미리보기가 띄워진다고 한다. 상세 설명 - node.js를 설치하는 이유는? : create-react-app 라이브러리 때문에 : npm이라는 툴 이용.. 2021. 11. 5. [React] 리액트를 왜 쓰는가 https://www.youtube.com/watch?v=LclObYwGj90&t=3s https://www.youtube.com/watch?v=MeZ3FCTub3I&list=PLCv2t5uA5ieBzDj1bgWUPtOJejj2VR9n1&index=13 https://www.youtube.com/watch?v=qcphnSqneE0 2021. 11. 4. 이전 1 2 3 다음 728x90
