window.scrollTo() 어떤 페이지에서 위로가기 화살표를 누르면 맨 위로 이동하거나 메뉴에서 어떤 버튼을 누르면 아래로 내려가버리는 버튼을 눌러본 경험이 있을 것이다. window.scrollTo()은 스크롤을 움직여주는 window의 내장 함수이다. window.scrollTo() 사용법 아래처럼 window.scollTo()의 파라미터로 x, y의 좌표를 직접 넣을 수 있고 ... { window.scrollTo(0,0); }}>위로가기 ... 딕셔너리의 형태로 top, left의 위치를 넣어줄 수도 있다. ... { window.scrollTo({top: 0, left: 0}); }}>위로가기 ... 위와 같이 버튼에 이벤트를 달아서 버튼을 클릭했을 때 맨 위로 이동하게 만들어보자. imp..

keyframes? 웹에서 애니메이션을 구현할 때 trasition과 animation이라는 스타일 속성을 많이 사용한다. transition은 단순한 엘리먼트의 상태변화에 사용하기 좋고, animation은 다이나믹한 효과를 주는데 쓰기 좋다. Keyframes는 animation에서 사용하는 속성 중 하나이다! animation 속성 animation은 8가지 속성을가지고 있다. css에서 animation의 예시는 아래와 같다. div { animation-name: example; animation-duration: 2s; animation-delay: 1s; animation-iteration-count: infinite; animation-timing-function: ease-out; ani..

공통점 url이 변경되어 다른 페이지로 이동한다. 차이점 HTTP 요청 history.push ❌ window.location.href ⭕ 새로고침 history.push ❌ window.location.href ⭕ Application 상태 유지(리액트 state 등) history.push ⭕ window.location.href ❌ 사용법 history.push('/'); window.location.href = '/'; url 변경, 페이지 이동시에 새로고침이 필요한 경우는 window.location.href를 사용하자!

map 리액트에서 동적인 배열을 렌더링 할 때는 내장함수 map()을 사용한다. 배열이 고정적이지 않고 배열의 인덱스를 하나씩 조회하면서 렌더링하는 동적인 방법에 map()을 사용한다는 의미이다. 리액트에서 동적인 배열을 렌더링해야 할 때는 map을 사용하여 일반 데이터 배열을 리액트 엘리먼트 요소로로 이루어진 배열로 변환해서 리턴해주면 된다. import logo from './logo.svg'; import './App.css'; function App() { const list = [1, 2, 3, 4, 5]; return ( {list.map((item) => { return( div 태그 ); })} ); } export default App; 하지만 콘솔에 아래처럼 key라는 props가 없다..

Redux? https://duckgugong.tistory.com/192 리덕스 리덕스란? 리덕스는 아주 흔히 사용하는 상태관리 라이브러리이다. 전역 상태관리를 편히 할 수 있도록 도와준다. 리덕스는 데이터를 한 군데 몰아넣고, 여기저기에서 꺼내볼 수 있게 도와준다. duckgugong.tistory.com 덕스(ducks) 구조 보통 리덕스를 사용할 때는, 모양새대로 action, actionCreator, reducer를 분리해서 작성한다. 예를 들어 액션은 액션끼리, 액션생성함수는 액션생성함수끼리, 리듀서는 리듀서끼리 작성한다. 하지만, 덕스 구조는 모양새로 묶는 대신 기능으로 묶어서 작성한다. 예를 들어 같은 기능을 가진 action, actionCreator, reducer을 한 파일에 넣는 ..

리덕스란? 리덕스는 아주 흔히 사용하는 상태관리 라이브러리이다. 전역 상태관리를 편히 할 수 있도록 도와준다. 리덕스는 데이터를 한 군데 몰아넣고, 여기저기에서 꺼내볼 수 있게 도와준다. 리덕스 용어 1. State 리덕스에서는 저장하고 있는 상태값(데이터)를 state라고 부른다. 딕셔너리 형태({key]: value})형태로 보관한다. 2. Action 상태에 변화가 필요할 때(= 가지고 있는 데이터를 변경할 때) 발생하는 것. 액션은 객체이다. type은 우리가 정하는 임의의 문자열이다. 이름이라고 볼 수 있다. 액션 객체는 type 필드를 필수적으로 가지고 있어야 하고, 그 외의 값들은 개발자 마음대로 넣어줄 수 있다. {type: '[액션 이름]', [key]: [value]} 모듈 내에서는 아..