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

전체 글

 (209)
[React] useEffect 목차 1. React 컴포넌트의 생애주기 2. React Hooks 3. useEffect 4. useEffect 사용법 예시 React의 Hook 중의 하나인 useEffect에 대해서 알아보자! React 컴포넌트의 생애주기 React 컴포넌트의 생애주기는 3가지로 나뉜다. 처음 화면에 나타날 때를 Mount, 화면이 바뀌면서 리렌더링 되는 것을 Update, 화면에서 사라지는 것을 UnMount 이 3가지 단계로 진행된다. React Hooks 리액트는 생애주기마다 실행할 수 있는 메서드를 가지고 있고, 이 메서드는 클래스형 컴포넌트에서밖에 사용하지 못한다. 그런데, 클래스형 컴포넌트는 사용할 때 코드의 길이가 길어지는 등 다양한 문제점이 있어서, 요즘에는 함수형 컴포넌트를 사용하는 추세이다. 그렇..
[React] 데이터 수정하기 (일기장 만들기 6탄) 코드가 1탄부터 이어지기 때문에 1탄부터 보고 오셔야 합니다~! 1탄 https://dev-ini.tistory.com/73 { return ( 작성자 : {author} | 감정 점수: {emotion} {new Date(created_date).toLocaleString()} {content} { console.log(id); if(window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)){ onDelete(id); } }}> 삭제하기 수정하기 // 수정하기 버튼 만들기 ); }; export default DiaryItem; 삭제하기 버튼 onClick 함수 위로 빼서 작성하기 DiaryItem.jsx const DiaryItem = ({ onEdit, onDelete, auth..
[React] 데이터 삭제하기 (일기장 만들기 5탄) 코드가 1탄부터 이어지기 때문에 1탄부터 보고 오셔야 합니다~! 1탄 https://dev-ini.tistory.com/73 { return ( 작성자 : {author} | 감정 점수: {emotion} {new Date(created_date).toLocaleString()} {content} { // 삭제하기 버튼 만들기 console.log(id); // 버튼 누르면 해당 id가 console에 뜸 }}> 삭제하기 ); }; export default DiaryItem; (1) App.js에서 onDelete 함수를 정의함 → 직접 App.js에서 함수 호출하는게 아니기 때문에 어떤 id를 갖고있는 요소를 원하는지 매개변수로 전달 (호출은 DiaryItem에서 해야함) (2) App.js에서 Di..
[React] 데이터 추가하기, 배열 리스트 만들고 추가하기 (일기장 만들기 4탄) 코드가 1탄부터 이어지기 때문에 1탄부터 보고 오셔야 합니다~! 1탄 https://dev-ini.tistory.com/73 - 추가, 수정, 삭제와 같은 이벤트들은 setData 같은 함수를 props로 전달해서 아래에서 위로 올라가는 구조이다. - 에서 새로운 일기를 작성하면 "생성"이라는 이벤트가 발생한다. - 이벤트는 에서 전달한 상태변화함수(setData)를 호출해서 data를 변화시킴으로써 이뤄진다. - data는 위에서 아래로만 움직인다. - data가 변화하게 되면 다시 아래로 떨군다. 위의 설명을 토대로 일기장 리스트 추가 기능 구현해보기 App.js import './App.css'; import DiaryEditor from './DiaryEditor/Diary..
[React] 데이터 리스트 렌더링 (조회) (일기장 만들기 3탄) 코드가 1탄부터 이어지기 때문에 쭉 보고 오셔야합니다~ 1탄 https://dev-ini.tistory.com/73 { return ( 일기 리스트 ); } export default DiaryList; 2. App.js에서 컴포넌트를 불러온다. App.js import './App.css'; import DiaryEditor from './DiaryEditor/DiaryEditor'; import DiaryList from './DiaryList'; function App() { return ( // 컴포넌트를 불러온다. ); }; export default App; 3. 리스트 데이터를 만든다. App.js import './App.css'; import DiaryEditor from './Diary..
[React] useRef로 DOM 조작하기 (일기장 만들기 2탄) useRef로 DOM 조작하는 법을 알아보자 코드가 1탄과 이어지기 때문에 1탄부터 보고 오셔야합니다~ https://dev-ini.tistory.com/73 { const [state, setState] = useState({ author: "", content: "", emotion: 1, }); const handleChangeState = (e) => { setState({ ...state, [e.target.name]: e.target.value, }); }; // 입력 강제하기 const handleSubmit = ()=>{ if(state.author.length < 1){ alert("작성자는 최소 1글자 이상 입력해주세요"); return; } if(state.content.length ..
[React] useState로 사용자의 입력 처리하기: input, button에 이벤트 달기 (일기장 만들기 1탄) 이렇게 생긴 일기장을 만들어볼 것이다. 1. 작성자 입력 받기 DiaryEditor.js import { useState } from "react"; // (1) 사용자의 input 입력값을 처리하기 위함 const DiaryEditor = () => { const [author, setAuthor] = useState("황혜인"); // (2) input의 입력값이 실시간으로 바뀔때마다 상태변화함수(setAuthor)를 이용해서 state(author)에 입력값을 저장해주면 됨 return ( 오늘의 일기 { setAuthor(e.target.value) }}/> // (3) 작성자(author)를 입력받을 input태그에 value 속성으로 전달을 해줌 // (3-1) input창에 입력해도 입력이 ..
[React] Warning: Invalid DOM property `for`. Did you mean `htmlFor`? 오류 해결 1. 오류 코드 Warning: Invalid DOM property `for`. Did you mean `htmlFor`? 2. 원인 JSX는 javaScrit이기 때문에 for은 반복의 의미를 가지고 있어서 HTML 상에서는 htmlFor을 써줘야 한다. 3. 해결방법 for대신 htmlFor을 써야한다.

티스토리툴바