728x90 반응형 공부/프론트6 [React] redux 사용법 이전 포스팅에서 useReducer와 Context를 활용해서 루트에서 관리하는 여러 상태 값을 자식 컴포넌트에서 사용하는 방법에 대해서 알아보았다.https://growth-coder.tistory.com/272 [React] useReducer와 Context로 상태값 관리리액트에서 상태 값을 관리할 때 useState를 사용해서 쉽게 관리할 수 있다. 그런데 만약 관리해야 할 상태 값이 많아진다면 하나씩 useState를 사용하는 방식은 번거로울 수 있다. useState부터 useReducegrowth-coder.tistory.com이번 포스팅에서는 상태 값을 관리할 때 redux를 사용해보려고 한다. 리덕스는 다음과 같이 단방향 구조로 되어있다. 이제 redux에서 상태 값을 변경하는 과정에 대.. 2024. 4. 26. [React] useReducer와 Context로 상태값 관리 리액트에서 상태 값을 관리할 때 useState를 사용해서 쉽게 관리할 수 있다. 그런데 만약 관리해야 할 상태 값이 많아진다면 하나씩 useState를 사용하는 방식은 번거로울 수 있다. useState부터 useReducer와 Context API를 사용하는 과정을 과목을 선택하고 정원을 조절하는 프로그램을 만들어보면서 이해해보자. useState + 객체 사용 먼저 상태 값을 객체로 정의해서 useState를 사용하는 방식이 있다. import React, {useState} from 'react' function App() { return ( ) } function Subject(){ const [subject, setSubject] = useState({name : "math", students.. 2024. 4. 22. [html/css] 테이블 꾸미기 (모서리 둥글게) 이번 포스팅에서는 테이블에 대해 알아보고 테이블을 꾸며보려고 한다. 우선 간단한 테이블을 만들어보자. 학번 이름 나이 111 김철수 22 222 김영희 23 평범한 테이블이 만들어졌다. 테이블을 사용할 때 주의할 점은 테이블은 기본적으로 셀 마다 거리가 존재한다. table, th, td 태그에 border: 1px solid black;를 입혀보자. table{ border: 1px solid black; } td{ border: 1px solid black; } th{ border: 1px solid black; } 만약 이 셀 간 간격을 없애고 싶다면 border-collapse를 collapse로 주면 된다. table{ border: 1px solid black; border-collapse: .. 2024. 4. 3. [html/css] input checkbox 커스텀 이미지 사용하기 이번 포스팅에서는 input checkbox를 커스텀해보려고 한다. 다음은 기본 input checkbox이다. 이 기본 input checkbox를 다음과 같이 변경해보자. 먼저 checkbox 이미지를 on, off 두 개를 준비한다. 이미지 뒤에 on, off를 붙여서 따로 저장하자. 1. input 태그 옆에 비어있는 label을 붙인다. label의 for 속성에 input 태그의 아이디를 입력하면 label을 눌렀을 때에도 해당 아이디를 가진 input 태그를 누른 것과 같은 효과를 가진다. label에 아무것도 넣지 않은 이유는 이 label에 이미지를 입힐 것이기 때문이다. 2. input 태그의 display를 none으로 변경한다. #check{ display: none; } 기본 체크.. 2024. 4. 2. 이전 1 2 다음 728x90 반응형
