728x90 300x250 SMALL Front-end/React115 React 드롭다운 메뉴 구현 : 선택된 값 표시하기 드롭다운 메뉴에서 사용자가 선택한 값을 추적하고 화면에 표시하는 React 예제코드설명1. useState로 상태 선언selected라는 상태 변수와 이를 업데이트하는 setSelected함수 생성2. onChange 이벤트 핸들러드롭다운 메뉴에서 선택된 값을 감지하고 상태를 업데이트3. 출력선택된 값이 태그에 즉시 반영 사용예제function SelectExample() { const [selected, setSelected] = useState("apple"); const handleChange = (e) => setSelected(e.target.value); return ( 사과 바나나 체리 선택된 과일: {sele.. 2025. 1. 21. React로 체크박스 상태에 따라 화면 출력하기 체크박스를 클릭하면 상태가 변경되고, 그 상태에 따라 화면에 "체크됨" 또는 "체크 안됨"을 출력하기 코드 설명1. useState로 상태 선언checked라는 상태 변수와 이를 업데이트하는 setChecked 함수 생성2. onChange 이벤트 핸들러체크박스의 체크 상태를 감지하고 상태를 업데이트3. 출력체크 상태에 따라 조건부 렌더링으로 "체크됨" 또는 "체크 안 됨" 표시 사용예시function CheckboxExample() { const [checked, setChecked] = useState(false); const handleChange = (e) => setChecked(e.target.checked); return ( 체크박스 .. 2025. 1. 20. 리액트에서 텍스트 입력 값 동적으로 업데이트하는 방법 React의 useState를 활용해 사용자가 입력한 텍스트를 실시간으로 화면에 반영할 수 있다. 코드 설명1. useState로 상태 선언text라는 상태 변수와 이를 업데이트 하는 setText함수 생성2. onChange이벤트 핸들러 요소에서 발생하는 입력 이벤트를 처리해 상태를 업데이트3. 출력입력한 텍스트를 태그에 즉시 반영 사용예시function TextInputExample() { const [text, setText] = useState(""); const handleChange = (e) => setText(e.target.value); return ( 입력 값: {text} );} 2025. 1. 19. 제어 컴포넌트란? 리액트에서 제어 컴포넌트는 HTML 폼 요소(input, textarea, select, state)에 의해 완전히 제어되는 컴포넌트를 말한다.즉, 사용자가 입력한 값은 리액트의 상태로 저장되며, 이 상태가 업데이트 될 때마다 입력 필드의 값도 동기화 된다.특징1. 상태로 값 관리폼 요소의 값(value)이 리액트의 상태(state)에 저장된다.상태 변경은 주로 onChange 이벤트를 통해 이루어진다.2. 단반향 데이터 흐름폼 요소의 값은 상태로부터 설정되므로 데이터이 흐름이 명확하다.상태가 업데이트되면 입력 필드의 값도 즉시 반영된다.3. 유효성 검사와 로직 포함 가능입력 값에 대한 유효성 검사나 동작을 쉽게 추가할 수 있다.제어 컴포넌트의 구조 기본 구조1. state를 사용하여 초기 값을 설정한다.. 2025. 1. 18. 이전 1 ··· 8 9 10 11 12 13 14 ··· 29 다음 728x90 반응형 LIST