리액트 (4) 썸네일형 리스트형 리액트의 불변성, 왜? 그리고 어떻게? 리액트에서는 useState() 훅을 이용하여 상태를 정의하고 반환된 setter함수를 이용해서만 데이터를 변경할 수 있다.배열이나 객체처럼 단일 값이 아닌 여러 값을 저장하고 있는 데이터 타입의 경우 아래와 같이 값을 변경해야 한다. //items 배열에 새로운 요소를 추가하는 예제const [items, setItems] = useState(['Item 1', 'Item 2', 'Item3']);const addItem = () => { setItems([...items, 'New Item']); // 기존 배열을 복사하고 새로운 아이템 추가}; 자바스크립트에는 배열에 요소를 추가하는 push()와 같은 메소드가 있는데, 왜 setter 함수를 이용해서만 값을 변경해야 할까? 그리고 setter 함.. [React] 5. 입문 - State / Props 1) State State(상태): 계속해서 변화하는 특정 상태, 계속해서 값이 바뀌는 동적인 데이터 → 상태에 따라 각각 다른 동작을 함. state는 리액트의 기능이기 때문에 리액트의 useState 기능(메서드)을 import 해주어야 사용 가능합니다. import {useState} from 'react'; 이 useState 기능을 이용하여 상태를 만듭니다. useState 메서드: 비 구조화 할당을 통해 배열을 반환함으로써 0번째 인덱스 요소에 상태의 값, 1번째 인덱스 요소에 상태 변화 함수를 반환하고 함수 호출 시에 넘겨 받은 인자는 상태의 초기 값으로 사용한다. [선언] const [count, setCount] = useState(0); ↳ 0번째 인덱스 요소인 count는 상태의 값으.. [React] 4. 입문 - JSX 리액트에서는 JSX 문법을 사용해서 HTML 요소들을 만듭니다. JSX: 자바스크립트의 확장 문법. 자바스크립트와 HTML의 혼합 형태의 문법. JSX는 리액트의 컴포넌트를 만드는 데에 아주 유용하게 사용됩니다. 1) JSX 기초 규칙 ① 닫힘 규칙 - 모든 태그는 반드시 닫는 태그가 있어야 한다. html에서는 , , , 등의 닫는 태그가 없는 단일 태그들이 있는데, 이런 단일 태그의 경우에는 태그를 열자마자 닫아주는 방식을 사용합니다. → Self-Closing tag ex) ② 최상위 태그 규칙 - 반드시 하나의 최상위 태그를 둔다. 최상위 태그: 어떤 개체 안에서 다른 모든 태그들을 감싸고 있는 가장 바깥에 위치하는 태그. JSX의 표현식은 반드시 하나의 부모를 가져야 합니다. 즉, 컴포넌트화 하.. [React] 2. 리액트란? - 개념 / 특징 1) 리액트(React)란? 리액트(React): 자바스크립트의 UI 오픈소스 라이브러리. 리액트는 가장 많이 쓰이는 자바스크립트의 대표적인 라이브러리이자 사용자 인터페이스(UI)를 만들기 위한 프레임워크 중 하나이고 브라우저에서 동작하는 복잡하고 여러가지 기능을 가진 자바스크립트 파일들을 쉽게 만들어내는 기술입니다. 웹 및 모바일 앱의 view layer를 처리하는 데 사용되며, 재사용 가능한 UI 구성요소를 만들 수 있습니다. 리액트를 사용하지 않아도 웹 페이지를 만들 수는 있으나, 리액트와 같은 프레임워크를 이용하다면 훨씬 편리하고 효율적으로 코드 작성을 할 수 있습니다. 2) 리액트가 필요한 이유 리액트가 필요한 이유는 너무나도 많지만 그중에 가장 대표적으로 소개되는 기본적인 특징 세 가지만 알아.. 이전 1 다음
