728x90 반응형 리액트26 [React+JS/리액트] 웹 스터디 8주차 Redux -1여러 컴포넌트가 공유하는 상태 관리를 자바스크립트 상태관리 라이브러리리액트와 사용하기 위해서는 RTK(React Tool Kit) 설치 필요 redux 를 사용하면 props 없이 state를 공유할 수 있게 해준다. 자바스크립트 파일을 하나 만들어서 state 들을 보관하고 모든 컴포넌트들은 자바스크립트 파일 안에 있는 state 들을 직접 꺼내쓸 수 있다. 프로젝트 사이즈가 커져서 컴포넌트가 많아졌을 때 사용하기 좋다. 그래서 요즘은 개발자 구인시에도 redux 같은 라이브러리의 숙련도를 대부분 요구한다고 한다. - redux toolkit 설치 redux 사용을 위해 터미널에서 아래와 같이 입력 redux toolkit 설치시 npm install @reduxjs/toolkit@1.. 2024. 6. 12. [React+JS/리액트] 웹 스터디 7주차 탭 UI 만들기 버튼 3개와 박스 3개를 미리 만들어놓고 버튼을 누를 때 마다 그에 맞는 박스를 보여주는 탭 UI 를 만들어보려고 한다. 다시 상기시켜보는 동적 UI 만드는 방법1. html, css 디자인 미리 완성시켜 놓고2. UI 의 현재 상태를 저장할 state 만들기3. state 에 따라서 UI 가 어떻게 보일지 작성 - html, css 로 디자인 미리 완성하기 리액트 부트스트랩 사이트에서 아래의 코드를 복사해서 가져오고, Nav 를 import 하기여기서 defaultActiveKey 는 페이지 로드시 어떤 버튼에 눌린 효과를 줄지 결정하는 부분으로 원하는 버튼을 넣으면 된다. import { Nav } from 'react-bootstrap'; 버튼0 .. 2024. 6. 5. [React+JS/리액트] 웹 스터디 6주차 컴포넌트의 Lifecycle 과 useEffect - 1 useEffect() 나 componentDidMount() 같은 함수를 쓰기 위해서는 컴포넌트의 lifecycle 을 알아야 한다. 컴포넌트의 인생을 알아야 컴포넌트 인생 중간에 간섭을 할 수 있기 때문이다. 컴포넌트의 인생은 3가지로 나뉜다.1. 생성 (mount)2. 재렌더링 (update)3. 삭제 (unmount) 컴포넌트의 인생에 간섭을 하려면 'Hook' 이라는 걸 달아야 한다. 훅 안에 실행할 코드를 넣으면 mount / update / unmount 시에 코드를 실행해주는데 Lifecycle hook 이라고 부른다. 옛날 리액트에서 Lifecycle hook 쓰는 법 예전 class 문법으로 컴포넌트를 만들 때, 안에 함수명.. 2024. 6. 3. [React+JS/리액트] 웹 스터디 5주차 리액트 라우터: 기본 라우팅 html 과 js 를 사용해서 웹 페이지를 만들면 페이지 별로 html 이 존재하지만, 리액트에서는 한 개의 index.html 을 사용하여 웹페이지를 만든다. 이게 무슨 말이냐 하면 html 과 js 를 이용했을 때는 다른 페이지로 이동해야 해야하면 html 파일 자체를 바꾸어 줬지만(index.html -> detail.html 이런 식으로), 리액트는 index.html 파일은 놔두고 안에 내용을 바꾸어 준다는 것이다. 리액트에서 페이지를 나눌 때 외부 라이브러리인 react-router-dom 이라는 외부 라이브러리를 설치해서 구현하는 것이 일반적이기 때문에 react-router-dom 을 설치해서 사용하기로 했다. react-router-dom 은 터미널을 열.. 2024. 5. 23. 이전 1 ··· 3 4 5 6 7 다음 728x90 반응형
