728x90 반응형 웹/24-StudyWithPnP17 [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. [React+JS/리액트] 웹 스터디 4주차 class 컴포넌트 만드는 법 최근에는 컴포넌트를 만들 때 function 을 사용해 만들지만, 예전 리액트에서는 class 문법을 사용해 만들었다. function 사용을 권장하지만, 예전 버전의 리액트 프로젝트를 마주칠 수 있으니 가볍게 공부해 보자. class 문법으로 컴포넌트 만드는 법class Modal2 extends React.Component { constructor(){ super() } render(){ return ( 안녕 ) }} 1. 클래스명을 작성2. constructor, super, render 함수를 채워 넣어야 함 -> 무조건 필요한 기본 템플릿이라고 생각하면 된다.3. 컴포넌트는 길고 복잡한 html 을 축약할 때 쓰기 때문에 retur.. 2024. 5. 16. 이전 1 2 3 4 5 다음 728x90 반응형
