본문 바로가기

JavaScript/React27

HTML, CSS 코드를 React로 변환할 때 주의할 점 🐳 가 여러개 있을 땐 , 태그로 전체 코드를 감싸줄 것! ex) import React from 'react'; class Login extends React.Component { return ( 안녕하세요 안녕히계세요 ); } 🐳 Self Closing Tag 꼭 닫아 줄 것! , , , , , 안 닫으면 오류 떠요 🐳 짝 맞는지 확인 할 것! 본인은 짝 안맞아서 한참 삽질했음ㅠ 🐳 import 경로 확인 할 것! CSS 파일이나 img 파일 경로 설정 잘못하면 적용이 안돼요ㅎㅎ... 2021. 11. 17.

주석 사용법 🥊 React 코드 주석 한 줄 주석 : // 여러 줄 주석 : /* */ Javascript와 동일함! // 한 줄 주석 componentDidMount() { // console.log("hello world"); return; }; // 여러 줄 주석 componentDidMount() { /* console.log("hello world"); return; */ }; 2021. 11. 16.

React Slick 사용법 🌳 React Slick 리액트 프로젝트에서 carousel을 쉽게 구현하도록 도와주는 모듈 👉🏻 React Slick 홈페이지 👉🏻 슬라이드 종류 1. 다음과 같은 명령어를 터미널에 입력해서 설치해준다. $ npm install react-slick --save $ npm install slick-carousel --save 2. 그리고 Slick에서 제공해주는 CSS를 사용하기 위해 다음의 코드를 import해준다. import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; 3. 기본 형태는 다음과 같다. import React, { Component } from "react"; import Slider.. 2021. 11. 16.

Custom-Hook Custom-Hook은 사용자 정의 Hook이라는 뜻이다. 사용자 정의 Hook은 다른 hook을 호출할 수 있다. 사용자 정의 Hook은 특정한 시그니처가 필요 없다. 무엇을 인수로 받아야 하며 필요하다면 무엇을 반환해야 하는 지를 사용자가 결정할 수 있다. 사용자 정의 Hook의 이름은 “use”로 시작되어야 한다. (관습) 사용자 정의 Hook은 이전 React 컴포넌트에서는 불가능했던 로직 공유의 유연성을 제공한다. 참고 사이트 👉🏻 자신만의 Hook 만들기 2021. 11. 16.

[생활코딩-React] State 사용 [출처 : Youtube - 생활코딩] https://youtu.be/e2c1EUcW7oo?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 오늘 배우는건 이해하려하지말고 그냥 그렇구나 하고 받아들이는게 편하다고 한다... ※주의 : 리액트에서는 props에 따옴표를 쓰면 문자로 인식을 한다. 문자가 아니라 자바스크립트의 코드로서 실행하게하고싶으면 중괄호{}를 사용하면 된다. src/App.js import './App.css'; import TOC from "./components/TOC"; import Content from "./components/Content"; import Subject from "./components/Subject"; import React, { Com.. 2021. 5. 29.

[생활코딩-React] Component 파일로 분리하기 [출처 : Youtube - 생활코딩] https://youtu.be/8hGqznPGVc0?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi src 디렉토리 안에 components 디렉토리를 생성한다. components 디렉토리 안에는 TOC.js라는 파일을 생성한다. TOC.js 파일에다가 App.js의 TOC 클래스를 복붙한다. 아래의 코드도 같이 복붙한다. import React, { Component } from 'react'; 'react라는 라이브러리에서 Component라고 하는 클래스를 로딩한다' 라는 뜻이다. 리액트를 사용할 땐 필수적으로 넣어야하는 코드라고 생각하면 된다. TOC라는 클래스를 외부에서 사용할 것을 허용하는 코드도 작성한다. export defau.. 2021. 5. 29.

이전 1 2 3 4 5 다음

티스토리툴바