본문 바로가기

React.js18

[React.js] Context API 문제가 되는 코드컨텍스트 범위를 헤더에만 적용하고 있는데, 이렇게 되면 헤더의 자식들만 로그인 정보를 공유할 수 있음 Context 리액트 공식문서를 공부했다.https://ko.legacy.reactjs.org/docs/context.html#when-to-use-context Context – ReactA JavaScript library for building user interfacesko.legacy.reactjs.orgContext 이용하면 장점- 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만,- 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우, 이 과정이 번거로울 수 있다.- context를 이용하면,.. 2023. 5. 1.
16강 - 글쓰기, 글목록보기 실습(2/2) (Redux) input에 name 속성을 주면이 문법 사용 가능 Flux - 자기 스스로는 반응하지 않으면서 다른 물질의 반응을 촉진시켜주는 촉매와 같은 역할 - 흐름. 다른 요청에 의해 반응Redux- 상태에 userid 같은 유저 정보 넣어놓으면 유저 정보가 필요한 모든 페이지에서 관리할 수 있음 상태에 배열이나 객체로 넣는 방법 Bottom.js“cos”가 Store.jspayload로 넘어오게 될 것 이게action에 담기게 될 것 type이 “INCREMENT”면 action.payload가 들어옴 2023. 3. 23.
14강 – 라우팅 (react-router-dom) 데이터 넘기기 – match.params https://velog.io/@wjd489898/ReactURL-%EC%A0%95%EB%B3%B4%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0matchuseParams [React] URL 정보가져오기(match,useParams) 도입배경Front에서 Back으로 api를 요청할 때 스토어의 id를 같이 넣어줘야하는데 그때 path의 정보를 가져오면 되겠다 생각하게 되었고 front의 path에서 값을 가져오는 방법을 찾게되었다.2가지 방법 velog.io 주소 뒤에 : App.js const App = () => { return ( ); }; export default App; Header.js const Header = () => { r.. 2023. 3. 23.
[React & Spring] 11강 - props - http 요청 (jquery ajax, fetch, axios(다운)) - 웬만하면 데이터는 page가 가지고 있도록 component X Homepage.jsimport React, { useEffect, useState } from 'react'; import Home from '../components/home/Home' const HomePage = () => { const [boards, setBoards] = useState([]); // 빈 배열이면 한번만 실행 useEffect(() => { // 다운로드 가정 let data = [ {id:1, title:"제목1", content:"내용1"}, {id:2, title:"제목1", content:"내용2"}, {id:3, title:".. 2023. 3. 21.

티스토리툴바