[React] Redux2 - state를 변경해보자

리덕스(Redux) 심화과정 - state를 변경해보자 값을 변경하려면 Slice안에 값을 어떻게 변경할것인지 미리 정의해야한다. let user = createSlice({ // name: 'user', initialState : 'kim', // 값 변경하기 위해 추가해야하는 reducers reducers...

탭UI 만들어보기

탭UI 만들기 모든 컴포넌트는 다음과 같은 단계로 제작 html/css만들기 상태 저장할 state만들기 연결하기 // State만들기 let [tab, setTab] = useState(0); {/* 탭만들기 */} <Nav variant="underline" defaultActiveKey="tab1"> <Nav.Item> <Nav.Link onClick={()=>setTab(0)} eventkey="tab1">탭...

React Animation 다뤄보기

애니메이션 만드는 간단한 방법 애니메이션 동작 전 className을 만든다 애니메이션 동작 후 className을 만든다 classname에 transition 속성 추가 한다 원하는 컴포넌트에 2번 className 부착 하면 끝! 간단한 전환 애니메이션을 구현해보자...

Ajax의 이해와 사용

Ajax란? 서버에 데이터를 비동기로 요청할 수 있는 방식 총 3가지 방식이있다. XMLHttpRequest: 옛날 문법 fetch(): 요즘 JS 문법 axios: 라이브러리 사용 라이브러리를 사용해서 부르는것을 많이 사용한다. Axios 사용해보기 Axios 설치...

React 라이프사이클 (useEffect)

# Lifecycle과 useEffect 컴포넌트의 lifecycle이란? 컴포넌트가 페이지에 보이는 순간 장착된다. (mount) 업데이트가 되는 과정도 있다. (update) 필요없으면 제거되기도한다 (unmount) 이렇게 컴포넌트의 상태에 따라 변경되는 상태를 lifecycle이라고한다. 이렇게 컴포넌트의 상태가 변경할때...

styled-components 사용해보기

# styled-components 사용해보기 컴포넌트가 많은 경우 스타일링하기가 매우 불편하다 때문에 해당 페이지에서 간단하게 스타일을 적용한 컴포넌트를 만들 수 있는 기능으로 styled-components를 사용할 수 있다. 예시) // 버튼 만들기 let YellowBtn...

React Url-parameter 사용하기

React Url-parameter 사용하기 Router을 사용하면서 상품 상세와같은 수백 수천 수만개의 상품 상세의 url을 일일히 직접 작성하는것은 무의미한 시간낭비를 발생시킨다. 반복문으로 url을 직접 설정할 수도 있겠지만 조금더 쉬운방법으로 React Router는 URL-parameter...

title

SSR과 CSR의 이해

SSR 과 CSR SSR(Server-Side-Rendering) 서버에서 모든 데이터를 미리 출력해 브라우저에 전달하는 기법이다. 장점 초기 구동 속도: 서버에서 모든 구성 요소가 렌더링되어 오기 때문에 첫 화면을 빠르게 보여줄 수 있다. 검색...

React 프로젝트에 Tailwind CSS 적용하기

React 프로젝트에 Tailwind CSS 적용하기 React 프로젝트에서 Tailwind CSS를 활용하려면 몇 가지 단계를 거쳐야 한다. 이를 정리해보자 프로젝트 만들기 tailwind를 설치하기 전에 프로젝트 디렉토리를 먼저 구성해야한다. 만약 이미 존재하는 프로젝트에...