React9 [React] 배열 - 새로운 배열 생성과 map() React에서 배열 형태의 데이터를 관리할 때는 기존 배열을 직접 수정하기보다 새로운 배열을 만들어 State를 변경하는 방식을 사용한다.또한 map()을 이용하면 배열의 데이터를 반복해서 JSX로 표현할 수 있다.1. 새로운 배열을 만들어 State 변경하기Todo 목록을 배열로 관리한다고 가정한다.const [todos, setTodos] = useState([]);새로운 Todo를 추가할 때 기존 배열에 직접 값을 추가하지 않고 새로운 배열을 만들어 전달한다.setTodos([...todos, value]);전개 연산자 ...를 사용하면 기존 배열의 요소를 새로운 배열에 복사할 수 있다.예를 들어 기존 배열이 다음과 같다면,todos["공부하기", "운동하기"]다음 코드가 실행된다.setTodos(.. 2026. 8. 14. [React] Form 이벤트 처리하기 React에서 사용자의 입력을 받아 처리할 때는 form과 이벤트를 함께 사용하는 경우가 많다.이번에는 간단한 Todo 리스트 등록 기능을 구현하면서 form의 onSubmit 이벤트와 preventDefault()를 사용하는 방법을 정리했다.1. form의 onSubmit 이벤트HTML의 form에서 등록 버튼을 누르면 submit 이벤트가 발생한다.React에서는 onSubmit을 사용해 이벤트를 처리할 수 있다. {}}> onSubmit에 함수를 등록하면 사용자가 form을 제출했을 때 해당 함수가 실행된다.2. 이벤트 객체 e이벤트가 발생하면 React는 이벤트 정보를 담은 이벤트 객체를 전달한다.관례적으로 e 또는 event라는 이름을 사용한다.onSubmit={(e) => { .. 2026. 8. 14. [React] useState로 수정 모드 구현하기 - 조건부 렌더링 React에서는 State를 이용해 화면의 상태를 변경할 수 있다.이번에는 링크 목록의 각 항목에 수정 모드를 추가하면서 useState와 조건부 렌더링을 활용하는 방법을 정리했다.1. 수정 모드 State 만들기먼저 LinkItem 컴포넌트에서 수정 모드인지 확인하기 위한 State를 만들었다.const [isModifyingMode, setIsModifyingMode] = useState(false);isModifyingMode는 현재 수정 모드인지 나타내는 State이다.처음에는 수정 모드가 아니므로 false로 설정했다.값의미false일반 모드true수정 모드2. 버튼을 클릭해 State 변경하기수정 버튼을 클릭하면 isModifyingMode의 값을 반대로 변경하도록 했다.setIsModifyi.. 2026. 8. 12. [React] State 배열에서 특정 항목 삭제하기 - filter() 활용 React에서 여러 개의 데이터를 배열로 관리하다 보면 특정 항목만 삭제해야 하는 경우가 있다.이번에는 링크 목록을 예제로 State로 관리하는 배열에서 원하는 항목만 삭제하는 방법을 정리했다.1. State로 배열 관리하기먼저 useState를 사용하여 링크 목록을 관리했다.const [links, setLinks] = useState([ { text: "네이버", href: "https://www.naver.com" }, { text: "다음", href: "https://www.daum.net" }, { text: "구글", href: "https://www.google.com" }, {.. 2026. 8. 12. [React] 이벤트와 State 웹 페이지에서는 사용자의 다양한 행동에 따라 특정 작업을 수행해야 한다.예를 들어 버튼을 클릭하거나, 마우스를 올리거나, 요소를 드래그하는 등의 행동이 발생할 수 있다.React에서는 이러한 사용자 행동을 이벤트(Event)라고 하고, 이벤트가 발생했을 때 실행할 함수를 이벤트 핸들러(Event Handler)라고 한다.이번에는 React에서 이벤트를 처리하는 방법과 useState를 이용하여 데이터가 변경되었을 때 화면을 다시 업데이트하는 방법을 알아보자.1. 이벤트와 이벤트 핸들러사용자가 웹 페이지에서 수행하는 행동을 이벤트라고 한다.대표적인 이벤트는 다음과 같다.버튼 클릭마우스 호버드래그키보드 입력예를 들어 사용자가 버튼을 클릭하는 것은 클릭 이벤트이다.React에서는 onClick을 이용하여 클릭.. 2026. 8. 11. [React] JSX 기본 문법 1. HTML 기본 태그와 선택자div와 span많은 HTML 태그를 외울 필요는 없다. 기본적으로 div와 span만으로도 대부분의 구조를 만들 수 있다.div : 블록 요소로, 기본적으로 줄이 바뀐다.span : 인라인 요소로, 기본적으로 줄이 바뀌지 않는다.id 선택자id는 요소를 식별하기 위한 이름이다. 하나의 페이지에서 고유한 값을 사용하는 것이 원칙이다.div#no1 { color: blue;}특정 요소 하나를 선택하고 싶을 때 주로 사용한다.class 선택자여러 요소에 같은 스타일을 적용하고 싶을 때 class를 사용한다.div.my-div { color: orange;}하나의 class를 여러 요소에서 사용할 수 있기 때문에 공통 스타일을 적용할 때 유용하다.2. Tailwind.. 2026. 8. 11. 이전 1 2 다음