Category: 수업내용

Bootstrap-빠르게 디자인을 끝내야 할 경우 앞서 만든 블로그를 React-Bootstrap을 이용하여 화면을 디자인하고 기능 복습하기 위함 블로그 구성-홈화면/게시판(보드리스트)-각각의 게시물/게시판 폼(추가)/로그인 화면 Read more

저번주 과제 풀이 Link와 NavLink로 만든 문자열은 a 태그로 들어간다.[콘솔로도 확인가능]   Read more

데이터 : 좋아요 / 모든 게시글에 좋아요 값을 넣을지-게시글 작성자가 혼자인 경우 특징 내가 좋아요한 게시글만 아이콘으로 표시>마이페이지에 보여줌-오늘 할 것 모두가 좋아요한 수를 표시(확인) 내가 선택한 것만 모아둠-그 내용을 선택해서 쓸지 좋아요한 게시글의 배열 안에 있다면 표시 좋아요한 게시글의 배열로 작성하여 만들기 게시글의 아이디만 넣기-화면표시만 마이페이지에서 제목까지-오늘 할 것 좋아요 배열의 객체=게시글의 id,title-필요한 값만… Read more

코멘트-게시글 없이는 존재하지 않음. 코멘트 객체 사용자 입력 : 내용/프로그램이 작성할 부분 : 작성자,날짜,코멘드ID,게시글의 ID-코멘트가 게시글의 위치를 찾기 위함 두 개 이상의 데이터를 연결할 때는 id를 통해서 연결해준다. 유저 객체 write-게시글과 유저를 연결하는 용도>원칙적으로는 값이 겹치지 않는 id값을 사용하여 구분 login 게시글,코멘드,유저 관계 게시글1개 기준>코멘트 다수 / 코멘트1개 기준> 게시글1개 게시글:코멘트 = 1:다수 →다수에게 1의… Read more

context 복습 route들의 데이터들은 서로 주고 받기가 어렵기 때문에 context를 쓴다. 글 쓰기 방법 배우기-제목,내용만 직접 적고 글 번호,날짜 는 코드로 자동완성하고 글쓴이는 임의로 고정(로그인 화면이 따로 없음) 서버의 DB를 사용하지 않기 때문에 현재는 JS로 값을 저장함 Read more

Context 일반적으로는 props를 쓰는데 자손 이하로 내려갈 때 props를 너무 많이 쓰기 때문에 그것을 대신하기 위한 방법. React.createContext : context 생성. () 안에는 null이나 빈 값 최상위에서 쓸려면 <Context이름.Provider></Context이름.Provider> 로 쓴다. 위에서 provider에서 value=값으로 지정해놓고 쓸려면 하위에 useContext(Context이름)으로 불러 올 수 있다.[value만 가능하다. 그 외는 props로 처리됨] 객체도 값으로 들어 갈 수 있다. 다른 컴포넌트에서도… Read more

Router(라우터) 기능 npm install react-router-dom 설치. 확인은 package.json에서 index.js에서 <App/>을 <BrowserRouter></BrowserRouter>로 감싸기. 이 때 import {BrowserRouter} from ‘react-router-dom’;추가 App.js에서 div를 Routes로 바꾸거나 div 안에 Routes 추가 Routes 안에서 <Route path=”주소” element={<컴포넌트이름/>}/>으로 쓴다. 위 2개도 react-router-dom에 있는 함수이므로 import {Routes,Route} from ‘react-router-dom’;추가 주소에 “*”를 넣었다면 path로 따로 지정한 주소를 제외한 모든 값을 의미한다. 해당 컴포넌트에서는 HTML의 a… Read more

기존에는 App.js에 해당 라우터와 하위 라우터를 같이 쓰는 방식이다. 대신 element의 값은 달라야 한다. 상위 컴포넌트의 경우에는 배열이나 객체를 써서 map으로 Link함수를 반복해서 내보낸다. 그리고 App.js에 추가를 해본다. 상위 Link 함수로 만든 링크들이 정상적으로 작동 하였다면 하위 컴포넌트에 들어갈 값을 작성한다. 하위도 작성을 했다면 역시 App.js에 추가를 하고 동작을 해본다. <Route path=’주소’ element={<컴포넌트이름/>}/> <Route path=’위의… Read more

정리용 router 쓰는 방법 npm install react-router-dom 입력(설치) index.js에 import {BrowserRouter} from ‘react-router-dom’;추가 <App/>를 <BrowserRouter></BrowserRouter>로 감싸기 App.js에 import {Routes,Route} from ‘react-router-dom’; 추가 div 안에 Routes를 넣거나 또는 div 대신 Routes로 변경 <Route path=’주소’ element={<컴포넌트이름/>}/>추가 path 부분 /만 있다면 맨 위 부분이다[locahhost:3000/] *을 입력한다면 path로 지정이 안 된 나머지 부분들 모두를 뜻한다. element 부분 : 특별한 것은 없다. 양식에… Read more

Query useLocation 과 useSearchParams 2개가 있다. useLocation의 경우 path로 적었던 그 뒷부분부터 [? 이후]모든 값을 들고온다. useSearchParams는 조금 더 써야 한다. let [searchParams,setSearchParams]=useSearchParams(); let nameText=searchParams.get(“name”); 대신 해당이름의 값만 들고오기 때문에 구별은 쉽다. 컴포넌트가 아닌 JS의 함수로 이동하는것도 가능하다. 이 경우에는 useNavigate라는 함수를 사용한다. import {useNavigate} from “react-router-dom”; 추가 let navigate=useNavigate();return 위에 추가 navigate(`/about?name=${input}`);return 안에 추가 여기서… Read more