짬짬이기록하기

아래의 경우 count가 3씩 증가한다. // setter함수에 매개변수로 함수를 지정하면 함수가 끝날때까지 대기함. 동기적으로 처리된다. const syncIncrement = () => { setCount((count)=>count+1) setCount((count)=>count+1) setCount((count)=>count+1) }

반갑습니다. 컴포넌트 body const PropBody = (props) => { return ( {/* 상위에서 컴포넌트 body에 추가한 문자열은 자동으로 prop.children에 들어간다. */} {props.children} {/* props.children : 반갑습니다. 컴포넌트 body */} ) }

npm install styled-components import styled from 'styled-components' // 상위가 props로 전달하는 값을 이용해 동적 스타일링 적용 컴포넌트 const Footer = (props) => { // div는 div 컴포넌트를 만드는 함수이다. `` 부분은 div 함수 호출하면서 전달하는 매개변수 // 동적 스타일링이 적용된 div컴포넌트를 만들자. const FooterBox = styled.div` position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: ${() => (props.theme === 'basic' ? 'skyblue' : 'yellow')};..

* 소프트웨어 아키텍쳐 모델 : 관심의 분리 ## MVC (Model, View, Controller) : 역할 별로 분리하여 개발 * 주 목적 : 화면이 주목적인 소프트웨어 개발에 적용 * Model : 비지니스 업무 로직과 데이타 * View : 프리젠테이션 로직(화면) * Controller : 제어 * express, spring ==> MVC 적용 * express(node기반의 백엔드앱의 Controll을 위한 프레임워크) * 동적 UI 컴포넌트를 만들기 위한 프레임웍 : angular,vue,react * react : View를 중심으로 한 프론트앱의 프레임워크, 동적 데이터을 반영하는 대규모 웹앱 구축을 위해 만들어짐 # React 소개 - html이 화면당 여러개 일때, 각각이 html..

import { useState, useEffect, useRef } from 'react' import { useNavigate } from 'react-router-dom' import axios from 'axios' // 검색창 const focusRef = useRef() const [searchClassName, setSearchClassName] = useState('search_input d-none') const [keyword, setKeyword] = useState('') const searchProduct = async ()=>{ setSearchClassName('search_input d-none') setKeyword('') const resp = await axios.get..

front import { useEffect, useState } from "react"; import axios from "axios"; import { Link } from "react-router-dom"; const ProductListPage = () => { const perPageItemNum = 3 // 한 페이지에 보여줄 항목 개수 const perGroupPageNum = 5 // 한 그룹에 보여줄 페이지 개수 //상태.. const [pageState, setPageState] = useState({ totalCount: 0, //전체 항목 개수 totalPageCount: 0, //전체 페이지 개수 totalGroupCount: 0, //전체 그룹 개수 currentPage: 1, ..

1. useRef 선언 import { useRef, useEffect } from 'react' const focusRef = useRef() 2. 해당하는 input에 ref 추가 3. 포커싱이 일어나야 하는 라이프사이클에서 focus() useEffect(()=> { if (searchClassName === 'search_input d-block') { focusRef.current.focus() } }, [searchClassName]) ==> 검색창 레이어가 뜨는 상황을 searchClassName 상태데이터로 (d-none, d-block) 제어했고, 상태데이터가 d-block일 때 포커싱이 되도록 처리했다.