본문 바로가기
Hello! I'm haein, a junior front-end developer. Welcome to my space.
간단한 자기소개 '◡'
안녕하세요. 정리하는 것이 주특기이고, 인문논술로 대학을 가서 나름 글쓰기에 자부심(?)이 있는 주니어 개발자입니다. 개발 공부를 하면서 좀 더 정돈된 기록을 해보고 싶어서 블로그를 시작하게되었습니다. 게시글 하나하나 정말 정성스럽게 열심히 썼구요. 되도록이면 공식문서를 참고해서 객관적이고 정확한 정보를 작성하려고 노력했습니다. 그리고 제가 이해가 될 정도로 디테일하게 서술해서 웬만한 사람들도 이해가 가능할 것이라는것이 저의 뇌피셜입니다. 아무쪼록 저의 글을 읽는 사람들이 어떤 방향으로든 도움이 되셨으면 좋겠습니다. 참고로 연보라, 연핑크를 좋아하구여, 그라데이션도 좋아합니다. 그래서 내 취향에 맞게 커스텀 했습니다 ㅎㅎㅎ MBTI는 ISTJ입니다. 너무 TMI라서 toggle로 해뒀습니다. 궁금한 사람들은 펼쳐보시겠죠?

전체 글

 (224)
[React] Filter (3) 리스트 카테고리 필터링 리액트에서 카테고리 필터링 하는 방법을 알아보자! 만들 예제의 완성본 파일 구성 App.js : 메인페이지 List.jsx (컴포넌트) : 리스트아이템이 합쳐진 리스트들 ListItem.jsx (컴포넌트) : 리스트 개별 아이템 Filter.jsx (컴포넌트) : 필터 data.js : 더미데이터 파일 구조 - App.js에서 List.jsx(리스트들)와 Filter.jsx(필터)를 import한다. - List.jsx(리스트들)에서는 ListItem.jsx(리스트아이템)를 import한다. - App.js에서는 data.js(더미데이터)를 import한다. 그리고 이 데이터를 필터해서 List.jsx(리스트들)에게 전달해줄 것이다. 1. 기본 마크업을 한다. App.js import { Filter }..
[React] Filter (2) 검색창, 검색어, 검색 필터 기능 구현 (검색창 만들기) 검색 필터 기능을 구현해보자!     만들 예제의 완성본  1. 가게 이름을 검색하면 해당 검색어와 일치하는 가게가 필터 돼서 뜬다.2. 해당하는 가게가 없을 경우 "검색 결과가 없습니다."가 뜬다.       구현 코드    List.jsx  (리스트 페이지) import React, {useState} from "react";import styles from "./List.module.css";import ListSearch from "../../components/ListSearch/ListSearch";import {data} from "../../const/data";import {ListBox} from "../../components/ListBox/ListBox";const List = ()..
[React] props 완전 정복기 (props 개념 쉽게 이해하기) 목차 1. props란? 2. [ props를 사용한 예시 1 ] props의 기본 원리 알아보기 3. [ props를 사용한 예시 2 ] Counter 컴포넌트에서 초기값을 props로 전달하기 4. [ props를 사용한 예시 3 ] state를 props로 전달하기 5. [ props를 사용한 예시 4 ] data를 props로 전달하기 6. [ props를 사용한 예시 5 ] 버튼 컴포넌트에 onClick이벤트와 type를 props로 전달하기 props를 예시 4개를 통해서 완벽하게 이해해보자! props란? "props"는 "properties"의 줄임말이다. 즉 프로퍼티의 모음집 (=객체)인 것이다. 아래를 보다시피, 객체는 프로퍼티의 집합이다. 결국 props는 객체인 것이다. props는..
[React] map과 find를 사용해서 데이터 리스트 렌더링 하기 목차 1. map을 사용하여 렌더링 하기 2. 리스트가 따로 컴포넌트로 분리 됐을 경우에 map을 사용하는 법 3. find를 사용하여 렌더링 하기 4. 컴포넌트로 분리 됐을 경우에 find 사용하는 법 map과 find를 사용해서 데이터 리스트 렌더링을 해보자! 1. map을 사용하여 렌더링 하기 (1) 기본적인 마크업을 하고, 데이터 리스트를 작성한다. List.jsx (페이지) import "./List.css"; const List = () => { const dummyList = [ { id: 1, title: "1번 게시글", }, { id: 2, title: "2번 게시글", }, { id: 3, title: "3번 게시글", }, { id: 4, title: "4번 게시글", }, { id..
[React] 데이터 값에 따라 CSS 스타일 다르게 지정하기 데이터 값에 따라 CSS 스타일을 다르게 지정하는 법을 알아보자! 만들 예제의 완성본 "영업중"은 파란색, "영업종료"는 빨간색으로 뜬다. 1. 마크업을 한다. List.jsx (리스트 페이지) import "./List.css"; const List = () => { const dummyList = [ { id: 1, title: "닭갈비", state: "영업중" }, { id: 2, title: "피자", state: "영업종료" }, { id: 3, title: "치킨", state: "영업중" }, { id: 4, title: "떡볶이", state: "영업중", }, { id: 5, title: "짜장면", state: "영업종료", }, ]; return ( 음식점 리스트 {dummyList..
[React] Routing (4) 리스트 페이지에서 게시글 클릭 시 상세 페이지 연결하기 (게시판 리스트 조회, useParams, useNavigate, Route, Routes, id 동적 라우팅) 목차 (router 설정까지 이미 다 하신분은 10번 부터 보시면 됩니다) 1. App.jsx, App.css 기본 구성하기 2. src/pages 내에 폴더 구성하기 3. import 하기 4. 4개의 페이지 import 하기 5. import 하기 6. import 하기 7. /list 경로 추가하기 8. 나머지 페이지 경로 추가하기 9. 리스트페이지와 상세페이지 마크업하기 10. App.jsx에서 path 속성 처리하기 11. id 별로 상세페이지 다르게 나오게 하기 12. 리스트페이지에서 리스트박스를 클릭하면 해당 상세페이지로 이동하게 하기 리스트페이지에서 게시글 클릭 시 상세페이지로 연결되는 router를 구현해보자! 구글링을 해봐도 기존의 블로그 주인들 코드들과 합쳐져서 이해할 수 없는 글이 ..
[React] 체크박스 (약관동의 만들기) 약관동의를 위한 체크박스를 만들어보자! 만들 예제의 완성본 1. 하위 체크 박스를 하나씩 선택해서 전체 체크 됐을때 전체동의 체크박스에 체크된다. 2. 체크박스가 전체 체크 된 상태에서 체크 박스가 한개 이상 해제되면 전체동의 체크박스가 해제된다. 3. 전체동의 시에 체크박스 모두가 선택되고, 다시 누르면 모두가 해제된다. state를 생성한다. const [allAgreed, setAllAgreed] = useState(false); const [agreements, setAgreements] = useState({ termsAgreed: false, personalInfoAgreedEssential: false, personalInfoAgreedOptional: false, ageAgreed: fal..
[React] input type="date" 기본값, 초기값을 현재시간(오늘날짜)으로 설정하기 input type="date" 에서 기본으로 보이는 날짜를 오늘 날짜로 설정되게끔 만들어보자! 1. input 태그를 작성한다. import { useNavigate } from "react-router-dom"; import MyButton from "../components/MyButton"; import MyHeader from "../components/MyHeader"; import { useState } from "react"; const New = () => { const navigate = useNavigate(); return ( } /> 오늘은 언제인가요? // (1) input 태그 작성 ); }; export default New; 2. date 상태(state)를 생성하고, in..

티스토리툴바