DEVELOPE/앱개발시작하기 (26) 썸네일형 리스트형 [20240513] 앱개발 시작하기 #26 | 투두리스트 이해해보기 요즘 너무 바쁘지만 앱 개발을 꼭 하겠다는 의지로 살고 있다. 그런데 나는 이런 간단한 것조차 내 머리로 바로바로 되지 않는 것에 한탄하며 결국 기초부터 다지자는 생각으로 이번 글을 작성한다.같이 시작해보자1. UI 구성하기new Date().toDateString() : 시간 출력해주는 함수 !! => 기억하자 계속 까먹는다new Date().toLocaleDateString()import './App.css'function App() { return ( 오늘은🐰 {new Date().toDateString()} 추가 Todo List⏳ .. [20240510] 앱개발 시작하기 #25 | 투두리스트 만들기 App.jsx // import { useState } from 'react'import './App.css'import Header from './components/Header'import Editor from './components/Editor'import List from './components/List'import { useState, useRef } from 'react'const mockData = [ { id : 0, isDone: false, content: "React 공부하기", date: new Date().getTime(), },{ id : 1, isDone: false, content: "React 공부하기1", date: new.. [20240510] 앱개발 시작하기 #24 | 개발자 도구 사용하기 리액트 개발자 도구 확장자 React Developer ToolsAdds React debugging tools to the Chrome Developer Tools. Created from revision 1717ab0171 on 5/8/2024.chromewebstore.google.com [20240510] 앱개발 시작하기 #23 | 라이프사이클 (LifeCycle) | useEffect 라이프사이클 = 생애주기1. Mount Like 탄생- 컴포넌트가 탄생하는 순간- 화면에 처음 렌더링 되는 순간서버에서 데이터를 불러오는 작업2. Update Like 변화- 컴포넌트가 다시 렌더링 되는 순간- 리렌더링 될 때를 의미어떤 값이 변경되었는지 콘솔에 출력 3. UnMount Like 죽음- 컴포넌트가 화면에서 사라지는 순간- 렌더링에서 제외 되는 순간컴포넌트가 사용하던 메모리 정리useEffect: 리액트 컴포넌트의 사이드 이펙트를 제어하는 새로운 React HookReact 컴포넌트 사이트 이펙트= 컴포넌트의 동작에 따라 파생되는 여러 효과import './App.css'import { useState, useEffect } from 'react'import Viewer fro.. [20240509] 앱개발 시작하기 #22 | Counter App 하나의 코드로 통합시import './App.css'import { useRef, useState } from 'react'function App() { // const num = useRef(0); const [num, setNum] = useState(0); const onClickNum = (e) => { setNum(num+e); } return ( Simple Counter 현재 카운트 : {num} {onClickNum(-1)}}>-1 {onClickNum(-10)}}>-10 {onClickNum(-100)}.. [20240508] 앱개발 시작하기 #21 | 리액트 훅 useState : State 기능을 낚아채오는 HookuseRef : Reference 기능을 낚아채오는 Hook- use가 붙으면 리액트 훅import { useState } from "react";// 3가지 hook 관련 팁// 1. 함수 컴포넌트, 커스텀 훅 내부에서만 호출 가능// 2. 조건부로 호출될 수 없다 // 3. 나만의 훅을 직접 만들 수 있다 const HookExam = () => { return hookexam}export default HookExam; [20240508] 앱개발 시작하기 #20 | useRef useRefReference 객체를 생성컴포넌트 내부의 변수로 활용가능어떤 경우에도 리렌더링을 유발하지 않음useRef & useState 차이?useState는 값이 변경되면 컴포넌트 리렌더링 해줌 const onChange = (e) => { setInput({ ...input, [e.target.name] : e.target.value, }); } { refObj.current++; console.log(refObj.current); }}>import { useState, useRef } from "react";const Register = () => { const [input, setIn.. [20240508] 앱개발 시작하기 #19 | 간단한 회원가입 1 import { useState } from "react";//간단한 회원가입 폼// 1. 이름// 2. 생년월일// 3. 국적// 4. 자기소개const Register = () => { const [input, setInput] = useState({ name:"", birth:"", country:"", bio:"", }) const onChange = (e) => { setInput({ ...input, [e.target.name]:e.target.value, }) } return( .. 이전 1 2 3 4 다음
