개인 공부용 블로그

** 자체적으로 제공하는 Hook이 있고, custom hook이 있음. ** Hook 사용시 use붙이기 ** Hook 사용시 최상위에서만 호출할 것 (반복문, 조건문에서 호출 XX) Hook의 규칙 Hooks API Reference✨ 1. useState const [state, setState] = useState(초기값); //state : get //setState : set 문제1. useState를 사용해서 button 클릭시 시간이 변경되게 하기 그림 1-1과 같이 지정하게 되면 클릭시 숫자가 계속 counting된다. newTime이라는 새로운 변수를 만들고 12라는 숫자보다 크면 다시 1을 갱신해준다. 문제2. input에 값을 upload할때 누적되어서 보여지게 하기 예제 2-1. ..

조건에 따라 다른 내용을 rendering(표현) 해야 할때에는 1. JSX밖에서 컴포넌트로 빼서 if문을 사용 2. {}안에서 삼항연산자를 사용해야 한다 조건부랜더링 조건부 렌더링 – React A JavaScript library for building user interfaces ko.reactjs.org //짧은 구문의 삼항연산자 {isLoggedIn ? 'currently' : 'not'} //긴 표현의 삼항연산자 {isLoggedIn ? : } 🌟step1. 삼항연산자를 통해 만들어보기 function App() { let [modal, setModal] = useState(false); // 초기값 보이지 않음 설정 return ( { setOpenModal(!modal) }}>{headLi..

반응형에 따라 component를 숨겼다 나타나게 해야할때가 있다. 그때는 responsive를 사용하면 된다. Install $ npm install react-responsive --save import React from 'react' import { useMediaQuery } from 'react-responsive' const Example = () => { const isDesktopOrLaptop = useMediaQuery({ query: '(min-width: 1224px)' }) const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' }) const isTabletOrMobile = useMediaQuery({ query: ..

SPA (Single Page Application) 서버에서부터 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹애플리케이션이나 웹사이트를 말한다. HTML, Javascript, CSS등 필요한 것들을 하나의 페이지로 불러오거나, 적절한 자원들을 동적으로 불러들여서 필요하면 문서에 추가한다 SPA의 특징 라우팅(Rounting) 라우팅은 출발에서 목적지까지의 경로를 설정하는 기능이다. SPA에서는 브라우저에서 이것을 구현하는것이 핵심이다. 보통은 사용자가 요청한 URL 및 이벤트를 해석해 페이지전환을 하기 위해 페이지 리로딩, 화면 깜빡임, 과부하가 걸릴 수 있는데 SPA의 경우 부드러운 화면 전환, 서버에 필요데이터를 요청하지 않고 페이지 전환이 가능. 컴포넌트..

#1. 웃는 모양을 클릭할거기 때문에 span에 onclick 함수를 넣는다. onClick={ ()=>{ 실행할 무언가 } } { 실행할 무언가 } 안에 실행할 내용을 넣는다. #2. state로 기능을 만들어 준다. let [like, likeChange] = useState(0); 좋아요를 클릭했을 때 1씩 증감되어야 하기 때문에 useState(0)을 기본값으로 넣어준다. state변경 함수로 값을 넣어주어야 재랜더링이 문제없이 잘 된다. state를 사용하는 이유는? 동적인 데이터를 다루어야 할 때 사용한다. #3. 버튼을 만들고 클릭했을 때 title이 변경되어야 하는 기능을 만들어보자. 버튼의 기능개발은 아래와 같이 사용할 수 있다. 버튼 #3-1. 값이 공유되지 않는 사본생성하기 버튼 클릭..

터미널에 warning 라고 뜨는 부분을 없애려면, App.js 상단에 아래 문구 주석으로 기재 /* eslint-disable */ 정상 적용 됨. 상황에 따라 적용하면 될 것 같다.

변수를 데이터 바인딩하는 방법 1. 변수 선언 해 데이터 바인딩으로 꽃아 넣는 방법 변수를 데이터 바인딩하는 방법 2. state를 이용해 데이터 저장 공간을 만든다. 상단에 정의한 import React는 node_modules 파일 안에 react라는 폴더가 있다. 기능을 사용할때는 import를 사용해서 연동해줘야 한다. 변수 대신에 사용할 수 있는 데이터 저장 공간이다. useState(' ')

node.js LTS버전 다운 vscode 터미널 실행 ( ctrl + ` ) blog라는 폴더를 생성하겠음 npx create-react-app blog 생성도중에 에러메시지가 뜰 수 있는데 해결방안 react 오류해결 App.js 가 html파일이라고 볼 수 있다. 라이브서버 띄우기 #1. 생성한 프로젝트 폴더에서 npm install 실행 (내부 생성된 폴더에서 실행하면 안됨!!!!!!!!!!) npm install #2. cd '서버 띄울 파일명' 내가 사용하려는 폴더명을 꼭 확인한다. 그리고 npm start 실행 #3. npm start