RoseDevlog

Library/React

컴포넌트 조건부 렌더링은, 새로고침을 하면 사용중이던 컴포넌트가 아닌 최초에 렌더링 되었던 메인으로 이동하는 단점이 있다! React-router-dom (web용) URL에 따라 각 페이지로 이동하기 위해 Router를 사용한다 BrowserRouter 동적 사용 외부 링크로 이동할 때는 태그 사용 라우터를 구성하는 3가지 모듈 BrowserRouter : History 객체 생성 / 반드시 라우터 컴포넌트 최상단에 위치한다 history 객체는 사용자가 방문한 페이지를 브라우저 기록에서 추적하고, 각 페이지의 URL, 타이틀, 방문 시간 등과 같은 정보를 유지한다 예를 들면 go() back() forward() Routes : Route의 상단에 위치 / url 변경시 Routes를 탐색한다 / 조..

2023. 11. 11.

Library/React

단축키 scp → ${props => props.}; scpt → ${({ theme }) => theme.}; rsc -> import React 부터 차례대로 해주는 개발자 도구 → command + option + i https://velog.io/@rgfdds98/React-snippets-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%A2%85%EB%A5%98%EB%B3%84-%EB%8B%A8%EC%B6%95%ED%82%A4 [React snippets] 컴포넌트 종류별 단축키 React 작성에 편의성을 높여줄 snippet을 알아보자 velog.io https://agal.tistory.com/139 35. Snippet 사용하기 - 리액트 입문 | 벨로퍼트 Snip..

2023. 11. 6.

Library/React

React rendering 리액트에서 렌더링이란 컴포넌트가 현재 props와 state의 상태에 기초해 UI를 어떻게 구성할지, 컴포넌트에게 작업을 요청하는 것 루트() DOM부터 시작해 플래그가 지정되어 있는 모든 컴포넌트를 찾아서 렌더링을 진행하는 것을 말한다 React로 구현된 앱은 일반적으로 하나의 root DOM 노드가 있고 React element와 일치하도록 DOM을 업데이트한다 React element를 렌더링하기 위해서는 우선 DOM element를 ReactDOM.createRoot()에 전달한 다음, React element를 root.render()에 전달해야한다 root id는 public/index.html에 기본적으로 설정 되어 있다 const root = ReactDOM.c..

2023. 11. 6.

Library/React

src폴더에 있을 경우 import 하기 import exampleLogo from '../image/example.jpg' const ImageWrap = styled.div` margin: 0 auto `; export const Banner = () => { return( ) };

2023. 11. 6.

Library/React

클릭 이벤트 호출로써 실행되게끔 () => handler()의 함수 내 호출로 작성해야한다 {tabList.map( data => ( handleClick(data.id)} > 조건문 역시 바깥으로 로직을 분리하고 onClick에서는 정리된 함수만 실행하게 한다 const checkVideo = () => { if (movie.videos.results.length === 0) { alert("예고편이 존재하지 않습니다") } else { setIsClicked(true) } } checkVideo()} >

2023. 11. 6.

Library/React

export import export 변수, 함수, 클래스 앞에 export 키워드를 붙여서 모듈의 기능을 외부에서 사용할 수 있도록 한다 export const Page002 =()=>{ return ( Page002 컴포넌트 ); }; import default 키워드가 추가된 변수, 함수, 클래스는 중괄호 {} 없이 식별할 수 있다 //import {Page002} from "./Page002"; //import Page004 from "./Page004"; import Page004, {Page002} from "./MultiPage" function App(){ return( ); } export default App //default 키워드를 사용하는 경우 {}없이 export 가능하다 ..또..

2023. 11. 6.

Library/React

useState와 useEffect hook 비슷한 로직 연관성을 지닌 함수끼리 묶은 것 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다 useState 함수형 컴포넌트에서 쓸 수 있는 것 [갱신하고싶은 변수, 변수를 갱신할 수 있는 함수] [something, setSomething] import React , {useState} from 'react'; //함수형 컴포넌트 function Example() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count +1)}> Click me ); } useState를 호출하는 것은 무엇을 하는 걸까? sta..

2023. 11. 6.

Library/React

props 변경 불가능하다 매개변수처럼 외부에서 컴포넌트로 전달되는 방식 상위 컴포넌트에서 하위 컴포넌트에게 data나 event handler 등을 전달할 때 사용되며, 매개변수와 같이 전달 state 변경 가능하다 컴포넌트의 내부에서 선언(변수처럼)되고 관리 handler 를 통해 state update handler setState 비동기적인 setState를 사용하기 위해서는 객체 대신 함수를 전달해야한다 //잘못된 실행 incrementCount() { this.setState({count : this.state.count + 1}); } //올바른 실행 incrementCount(){ this.setState((state) => { return {count : state.count +1} })..

2023. 11. 6.