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

Libraries/React

 (42)
[React] Filter (1) 최신순/오래된순 등등 필터링 리액트에서 필터 기능을 구현해보자! 만들 예제의 완성본 1. 최신순/오래된순 필터 만들기 1. 컴포넌트를 만든다. DiaryList.js import { useState } from "react"; const ControlMenu = ({value, onChange, optionList}) => { // (1) 컴포넌트 만들기 return } const DiaryList = ({ diaryList }) => { return ( // (2) 컴포넌트 불러오기 {diaryList.map((it) => ( {it.content} ))} ); }; DiaryList.defaultProps = { diaryList: [], }; export default DiaryList; // (1) ControlMenu 컴포..
[React] 버튼을 클릭시 모달창(팝업창) 컴포넌트 뜨게 하기, 닫기(취소) 버튼 누르면 없어지게 하기, useState props로 전달하기 , props 사용하여 state를 다른 컴포넌트로 전달하기 버튼을 클릭하면 모달창이 열기/닫기할 수 있는 기능을 구현해보자! 만들 예제의 완성본 상단에 장바구니 담기 버튼을 누르면 모달창이 뜬다. (배경도 어두워지고 배경에 있는 것들은 클릭 안됨) 그리고 취소 버튼을 누르면 모달창이 없어지고, 배경도 다시 원래 색으로 변한다. 1. 모달창 컴포넌트를 만든다. Modal.jsx 라는 컴포넌트를 만들고, 여기에 Modal.css 파일을 import해서 style을 적용한다. 그리고 App.js 에 Modal .jsx 컴포넌트를 import해서 렌더링한다. Modal.jsx import "./Modal.css"; export const Modal = () => { return ( [풀무원] 국물 떡볶이 4,000원 - 2 + 합계 8,000원 취소 장바구니 담기 );..
[React] 게시글 더보기, 접기 토글 버튼 만들기 게시글 더보기, 접기 토글 버튼을 만드는 법에 대해서 알아보자! 만들 예제의 완성본 글자수가 100자 이상일때 더보기 버튼이 뜨고, 더보기 버튼을 누르면 글 전체가 펼쳐지고, 접기 버튼을 누르면 원래 접힌 상태로 돌아간다. 1. 기본적인 마크업을 한다. Board.jsx 라는 컴포넌트를 만들고, 여기에 Board.css 파일을 import해서 style을 적용한다. 그리고 App.js 에 Board .jsx 컴포넌트를 import해서 렌더링한다. Board.jsx import "./Board.css"; export const Board = () => { const content = "동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세 남산..
[React] 버튼 클릭 시 toggle로 CSS style 바꾸는 방법, 버튼 클릭 시 요소 숨기기, 펼치기 버튼을 클릭 시 CSS style이 바뀌게 하는 방법을 알아보자! 만들 예제의 완성본 메모장 작성 버튼을 누르면, 메모장을 작성하게 할 수 있는 textarea가 펼쳐지게 하는 예제를 만들어볼 것이다. 1. 기본적인 마크업을 해서 메모장을 만든다. Toggle.jsx 라는 컴포넌트를 만들고, 여기에 Toggle.css 파일을 import해서 style을 적용한다. 그리고 App.js 에 Toggle.jsx 컴포넌트를 import해서 렌더링한다. Toggle.jsx import "./Toggle.css"; export const Toggle = () => { return ( Click to write a note! ); }; Toggle.css .container { width: 400px; height:..
[React] 프로필 사진 업로더 만들기, 프로필 변경/삭제/추가, 프로필 페이지 만들기 리액트로 프로필 업로더를 만들어볼 것이다! 구현과정에 대한 설명을 세세하게 적어둔 블로그가 없었기에 많이 헤맸었다. 그래서 나는 최대한 친절하게, 자세히, 하나하나 다 정리해보고자 한다. 1. 프로필 영역을 마크업 한다. ProfileChange.jsx import styles from "./ProfileChange.module.css"; import DeleteImg from "../../../assets/my-page/setting/profile-delete.png"; import DefaultImg from "../../../assets/my-page/setting/default-background.png"; const ProfileChange = () => { return ( 프로필 변경 블로그 ..
[React] useReducer를 코드에 적용하기 (emotion diary 프로젝트 2탄) useReducer 개념을 알아야 이해가 가기 때문에 아래 게시글을 보고 오시길 바랍니다! https://dev-ini.tistory.com/89 [React] useReducer로 복잡한 상태변화 로직을 컴포넌트로부터 분리하기 useReduer를 사용해서 복잡한 상태변화 로직을 컴포넌트로부터 분리하기 useReducer 위 사진에서 보다시피, App.js 컴포넌트 안에 굉장히 많은 상태변화함수 (onCreate, onEdit, onRemove)가 존재하는 상태이다 dev-ini.tistory.com 1. reducer 함수를 전달하고, 기본 state 빈배열로 설정한다. App.js import React, { useReducer } from "react"; import "./App.css"; impo..
[React] useReducer로 복잡한 상태변화 로직을 컴포넌트로부터 분리하기 useReduer를 사용해서 복잡한 상태변화 로직을 컴포넌트로부터 분리하기 useReducer 위 사진에서 보다시피, App.js 컴포넌트 안에 굉장히 많은 상태변화함수 (onCreate, onEdit, onRemove)가 존재하는 상태이다. 그리고 이 상태변화함수들은 컴포넌트 내에만 존재해야만한다. 상태를 업데이트 하기 위해서는 기존의 상태를 참고해야하기 때문이다. 그런데 컴포넌트의 코드가 길어지고 무거워지는건 결코 좋지 않다. 그래서 복잡하고 긴 상태변화 로직을 컴포넌트 바깥으로 분리해야한다. 그때 사용하는 것이 useReducer이다. 위 사진에는 useState만 사용해서 1부터 10000까지 각각 더할 수 있는 Counter가 있다. 그리고 10, 10, 100, 1000, 10000을 더할 수..
[React] Warning: you provided a `value` prop to a form field without an `onchange` handler. this will render a read-only field. if the field should be mutable use `defaultvalue`. otherwise, set either `onchange` or `readonly` Warning: you provided a `value` prop to a form field without an `onchange` handler. this will render a read-only field. if the field should be mutable use `defaultvalue`. otherwise, set either `onchange` or `readonly` 오류를 해결해보자! 1. 아래와 같은 오류가 떴는데, 이는 태그 사용 시 value 속성을 고정값으로 설정하지 않아서 생기는 오류이다. 오류가 생긴 부분의 코드 const MyCourseCalendar = () => ( ); export default MyCourseCalendar; 2. 해결방법: value 속성을 de..

티스토리툴바