컴퓨터/React10 [React] 리액트 여러 인풋값 한 번에 관리/인풋을 하나의 객체로 리액트 여러 인풋 값 관리 여러 인풋값 관리에 대한 해결 방법을 고민하던 중, 찾아서 코드로 정리한다. 일반적으로 아래 방법을 사용한다. {setTitle(e.target.value)}} value={title}/> 하지만 이 글에서는 input값들을 하나의 객체 state형태로 관리할 것이다. 해결 우선 아래와 같이 useState를 생성한다. 각각 name값이 title, content, fileName인 인풋(텍스트 에어리어) 태그에 대해서 적용할 것이다. let [inputs, setInputs] = useState({ title:'', content:'', content2:'' }); useState에 의해 초기 값은 빈 값을 주게 된다. 저기서 핵심은 onChange={handleChange}.. 2023. 8. 10. [React] 리액트로 Radio태그 다루기 아래의 코드는 버튼을 클릭시 보여지는 값을 radio의 value로 설정하는 간단한 예제코드이다. 타입 스크립트로 작성되었으며, name으로 radio태그 선택을 설정하지 않고 checked에서 값을 비교하여 사용하였다. checked등 태그의 속성을 저런 방식으로 사용할 수도 있다는 것에 영감을 받아 기록하고자 코드를 남긴다. function InputRadio(){ const [radioVal, setRadioVal] = useState(); let handleClick = (e:React.ChangeEvent)=>{ setRadioVal(e.target.value); } return( 선택된 항목 {radioVal} 1: 2: 3: ) } 2023. 8. 9. [Redux] 리액트 리덕스 상태관리 정리/간단한 예제 리액트 리덕스 상태관리 리덕스에서 상태관리 코드를 작성할 때 리듀서를 작성하게 된다. 리듀서는 디스패치를 호출할 때마다 콜되는 함수이다. 그런데 리듀서 안에서 어떤 것을 실행하게 될까? 보통 리듀서에는 state와 action을 파라미터로 넘기는데, action의 type을 분기로 처리하여 실행할 것을 정하게 된다. (중요한 것은 state에는 초기 한 번은 실행되므로 디폴트 값을 줘야한다.) const counterReducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } }; 위의 경우.. 2023. 8. 8. [React] 배열 각 요소 컴포넌트로 전환 배열을 컴포넌트로 전환하는 쉬운 방법을 간략히 정리해놓고자 한다. 우선 App 컴포넌트의 형태는 아래와 같다. import './App.css' import {Hello} from './Hello' export default function App() { const names = ['Bill', 'Chichi', 'Mina']; return ( ) } 여기서 하고자 하는 것은 자식 컴포넌트에서 프롭으로 전달받은 배열의 각 요소를 컴포넌트(예를 들어 div태그에 innerHtml을 해당 배열의 값으로 가지는 컴포넌트)로 전환하는 것이다. 1. for each문 export function Hello({name}){ const arr = []; for(let n of name){ arr.push( {n} ).. 2023. 6. 8. 이전 1 2 3 다음
