개인 공부용 블로그

Redux란? JavaScript 상태관리 라이브러리 Node.js 모듈 Redux 작동 구조 Action -> Reducer -> State redux를 사용하면 store에서 모든 상태 관리가 일어난다. 상태 변화를 일으켜야 할때 action (type : 객체) 이라는 것을 store에 전달한다. 상태 변화시 객체를 참조해 변화를 일으킴 (이 과정을 디스패치라고 한다.) Redux 사용 규칙 Redux의 state는 읽기 전용이다. (dispatch를 통해서만 state변경이 가능하다) 참고: https://jjy0821.tistory.com/40 Redux는 무엇이고, 어떤 장점이 있는가? 첫 프로젝트 때는 클라이언트 사이드 구성에서 데이터 흐름에 대해 하위 컴포넌트들이 깊게 들어가지 않으니 상태..

** 자체적으로 제공하는 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의 경우 부드러운 화면 전환, 서버에 필요데이터를 요청하지 않고 페이지 전환이 가능. 컴포넌트..

xl 사이즈에서 margin, padding의 간격을 바꿔주고 싶다면 아래처럼 바꿔준다. 사이즈가 xs -> xl로 들어가는 시점에서 margin-top을 바꿀 예정이므로, mt-5 -> mt-xl-4로 margin-top 간격을 수정해준다.

방법1. CDN 가져오기 부트스트랩 바로가기 Hello, world! 위의 형태로 태그 안에 주소를 넣어준다. script는 끝나기 전에 넣어준다. 단, 사이트에서 데이터를 가지고 오는 것이기 때문에 인터넷이 느리거나 물리적 거리가 있을 경우 느려지게 된다. 방법2. 터미널 설치하기 2-1. 경로 설정 먼저 잘 체크해준다. (폴더 생성한 파일 안으로 들어가서 부트스트랩 설치해주기!) 부트스트랩 다운로드 바로가기 npm install bootstrap jquery popper.js npm install bootstrap@next @popperjs/core **5버전은 IE에서 적용되지 않는 부분이 일부 있다고 한다. 2-2. src > main.js 파일로 들어가서 아래와 같이 import 해준다. imp..

#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(' ')