React49 리액트 복습 - 글 추가 및 삭제기능 넣기 글 추가 기능 넣기 오늘은 글 추가 기능을 새로 만들어보았다. 예전에는 쉽게 하던 것인데, 몇 개월 지나고 다시 하려니 기억이 안난다. const [userInput, setUserInput] = useState(""); const addPostHandler = () => { let postNameCopy = [...name]; postNameCopy.unshift(userInput); if (!userInput) { return; }; setName(postNameCopy); } {setUserInput(e.target.value)}} /> 추가 해당되는 부분만 잘라 붙여보면 위 코드와 같다. 사용자가 작성하려는 글을 입력받아 저장할 수 있도록 useState를 이용해 userInput 값을 만들어 놓.. 2024. 1. 6. 리액트 복습 - 게시글 눌렀을 때 모달창으로 해당 글 띄우기 게시글 클릭하면 해당 게시글을 보고싶어요! 기존에 만든 게시판에서 글을 클릭하면 내가 하드코딩한 글만 계속 보였다. 그래서 오늘은 글을 클릭하면 해당 게시글의 제목이 표출되도록 해보았다. const postName = [ "여자 코트 추천", "강남 우동 맛집", "파이썬 독학" ]; const [name, setName] = useState(postName); const [modal, setModal] = useState(false); const [title, setTitle] = useState(0); const modalHandler = () => { setModal(true); if (modal) { setModal(false); } } 우선 게시글의 제목은 위 코드의 postName과 같고, u.. 2024. 1. 5. 리액트 기초 복습 - 깊은 복사로 배열 수정하기 배열 내 특정 값만 useState의 변경함수로 바꾸기const postName = [ "여자 코트 추천", "강남 우동 맛집", "파이썬 독학"]; const [name, setName] = useState(postName); 이런 코드가 있을 때 postName의 0번째 값을 '남자 코트 추천'으로 바꾸고 싶다. 변경 가능성이 있는 값이기에 useState를 사용하여 값을 바꾸기 위해 아래와 같이 핸들러함수를 만들어 보았다.const nameChangeHandler = () => { let postNameCopy = postName; postNameCopy[0] = "남자 코트 추천"; setName(postNameCopy);} 원본인 postName 값을 바꾸지 않.. 2024. 1. 4. 여러 가지 라우터 훅과 함수 loader() 코드를 저장해야 하는 위치 loader() 함수의 코드는 저번에 올렸던 포스팅에서처럼 App.js 파일에 할 수 있지만, 특정 컴포넌트의 loader() 함수임을 밝히고 싶을 때는 해당 컴포넌트 내에서 만들어서 이를 App.js 파일에서 불러올 수가 있다. 위 코드는 기존에 App.js 파일에 있었던 loader 함수의 코드를 EventsPage 컴포넌트의 export default 구문 아래로 옮기고, 이를 App.js 파일에서 eventsLoader라는 이름으로 불러와서 createBrowserRouter 함수의 children 속성 내 EventsPage 컴포넌트에 해당하는 곳의 loader 속성에 적용해주었다. 이렇게 해당 컴포넌트에 저장하는 것은 일반적이며, App.js 파일의 .. 2023. 7. 13. 라우터에서 데이터 가져오기 라우터에서 데이터 가져오기 오늘은 라우터를 사용하면서 데이터를 가져오는 것에 대해 공부했다. 수업자료로 백엔드파일과 프론트엔드파일을 받아서 프론트엔드파일에서 백엔드의 데이터를 적용하는 내용이었다. 이를 위해 기본적인 라우터 설정을 마친 뒤, createBrowserRouter 함수 내에서 백엔드 데이터를 적용할 EventsPage 컴포넌트에 loader()라는 속성을 넣어주었다. 💡 loader() 속성: 이 속성은 리액트 라우터의 동적 라우팅을 위해 사용되는 속성 중 하나이며, 해당 경로로 이동할 때 비동기적으로 데이터를 로드하고 처리하는데 사용된다. 속성값으로 함수를 값으로 취하며, 이 속성이 적용된 컴포넌트가 렌더링되기 전에 loader 속성의 함수가 리액트 라우터에 의해 먼저 실행된다. 위 코드에.. 2023. 7. 6. 동적 라우트 정의, 라우트에서도 중요한 상대경로와 절대경로 동적 라우트 정의하기 오늘은 어제 설정한 라우트 코드를 수정하여 동적인 라우트로 만들어주었다. 동적인 라우트로 만들기 위해서 라우트에서의 상대경로와 절대경로가 중요하다는 것을 알게 되었다. 위 코드의 왼쪽은 절대경로이고 오른쪽은 상대경로이다. 절대경로는 / 를 붙이게 되며, 반드시 이 경로를 통해 이동이 이뤄져야 한다. 경로를 벗어나면 오류가 발생한다. 반면, 상대경로는 / 가 없으며, 기본 루트만 정해지면 기본 루트의 뒤에 자동으로 붙여진다. 좀 더 유연한 방식이 된다. 그리고 위 코드처럼 개별 데이터를 하나의 페이지로 연결하는 경우를 많이 볼 수 있다. 쿠팡이나 네이버쇼핑 같은 곳에만 가도 흔히 볼 수 있는 경우이다. 이 경우, 위의 createBrowserRouter 함수 내에 하나씩 추가하여 사용.. 2023. 7. 5. 이전 1 2 3 4 5 ··· 9 다음
