[React] React Ref란
React
[react] useref()
자바스크립트에서 DOM을 조작할 땐 queryselector나 getElementById, getElementByClassName DOM Selector메소드를 사용했죠. 하지만 리액트에서 그런식으로 DOM을 조작하면 안 됩니다. 대신 useRef() 훅을 사용해야 합니다.
[react] 탭메뉴 만들기
오늘은 부트스트랩을 사용해 텝메뉴 만드는 법을 알아보도록 하겠습니다. 먼저 아래 처럼 react-bootstrap을 설치후 import해주세요.
[react] 상대경로 vs 절대경로
상대경로
[error] react Scripts 에러
평소처럼 npm start로 리액트 프로그램을 실행하려는데 다음과 같은 오류를 만났습니다. 😫
[react] 데이터 바인딩 ③ redux
redux는 index.js에서 Provider태그를 가지고 상위 컴포넌트 App에 state를 전송하고 reducer를 통해 데이터를 관리하기 떄문에 여러 컴포넌트에서 반복적으로 나타나는 데이터를 전송할 때 사용하면 편리합니다.
[react] 데이터 바인딩 ② usecontext
App 컴포넌트에서 생성한 state를 다른 컴포넌트에서 쓰려고 할 떄 전엔 props를 통해 전달해줬습니다. 간단한 데이터를 내보내기엔 편하지만 관리가 필요한 복잡한 데이터, 또는 여러번 props해줘야 되는 데이터의 경우엔 props를 여러번 사용하는 게 불편합니다. 이럴 때 ...
[react] axios(ajax)
ajax는 서버에 새로고침 없이 요청이 가능하게 해주며 다음과 같은 방법으로 사용합니다.
[react] useeffect
컴포넌트엔 인생주기 lifecycle가 있습니다. 마운트, 언마운트시 (등장 업데이트), 재렌더링되고 퇴장하는 모든 순간인데요. 이 각각의 순간마다 훅을 걸면 특정 순간에 작동되는 명령을 만들 수 있습니다.
[react] styled Components
컴포넌트가 많아지면 일일이 css 만들기 복잡합니다. 실수로 className을 중복 사용하는 경우도 있죠 그래서 styled-component를 사용합니다.
[react] useparams & 경로설정
저번 시간에 반복문으로 하나의 component를 여러번 출력 하는 방법에 대해 알아봤습니다.
[react] component + 반복문
쇼핑몰의 메인페이지엔 상품 수 만큼의 상품컴포넌트들이 출력됩니다. 그런데 이 코드들을 일일이 입력한다면… 😱 너무 일이 많아질 것입니다.
[react] react Router Dom ④ usehistory
useHistory는 방문기록을 저장할 수 있는 기능으로 훅으로 객체를 초기화해서 사용하는데 뒤로가기 같은 기능에 사용하기 좋습니다.
[react] react Router Dom ③ switch
리액트 라우터는 “/” 나 “/:id” 로 경로가 설정된 경우 모든 경로의 페이지를 라우팅합니다. 그게 싫고 정확히 매칭된 컴포넌트만 보이게 하고 싶다면 Switch를 사용하면 됩니다.
[react] react Router Dom ② link
원래 지정 경로 페이지로 라우팅을 하려면 href를 사용했습니다.
[react] 모듈화
리액트는 싱글페이지로 화면 개발합니다. App.js 내부에 컴포넌트들을 렌더링하기 때문에 현재 모든 컴포넌트들을 한페이지에 작성해뒀는데요.
[react] route에서 이미지 깨짐 오류
상세페이지를 라우팅하고, 해당 페이지에 보낸 props의 state 값을 이용해 img src를 지정하려고 했습니다.
[react] link
리액트로 작업을 하다가 터미널에 다음과 같은 메세지를 받아보신적이 있을 것입니다.
[react] sass
Sass는 css를 프로그래밍언어스럽게 작성하도록 도와주는 preprocessor 패키지입니다. 예로 sass를 사용하면 css 파일 내에서 변수, 연산자, 함수, extend import등을 사용해 코딩이 가능합니다.
[react] react Router Dom ① route
리액트는 알시다시피 하나의 페이지만을 사용하죠. 그런데 여러페이지를 띄우고 싶다면 어떻게 해야 할까요?
[react] bootstrap 적용
프론트엔드 작업을 할 때 직접 css를 하기 귀찮다면, css 라이브러리 bootstrap을 이용하면 됩니다. 리액트에도 마찬가지로 적용가능한데요. 다음과 같은 방법으로 사용하시면 됩니다.
[react] create React App 에러
npx create-react-app 프로젝트명
[react] props
App이란 컴포넌트에 아래 변수가 있습니다.
[react] input
저번 시간엔 event.target 속성을 이용해 input 값을 state에 저장하는 법을 알아봤는데요. 오늘은 그 값을 기존 state 배열에 저장해 화면해 출력하도록 해보겠습니다.
[react] component 옛날 작성법
요즘엔 함수로 컴포넌트를 생성하고 useState를 이용해 값을 저장하지만 옛날엔 클래스로 컴포넌트를 생성하고 생성자함수안에 this.state에 값을 저장했습니다.
[react] component
component를 사용하면 여러줄의html을 한 단어로 줄여서 쓸 수 있습니다. 리액트에선 하나의 주제값을 보여주는 div를 만들 때 컴포넌트형태로 만드는데요. 쇼핑몰 화면 각각의 상품칸이 이런 형태를 띄고 있다고 생각하시면 됩니다.
[react] react 웹페이지 만들기 1
React 프로젝트 생성 및 node.js 서버에 연결
[react] jsx
JSX는 JavaScript XML의 줄임말로 자바스크립트에 XML을 추가한 확장형 문법입니다.