본문 바로가기

Programing371

2024-05-21 [React] state로 렌더링 되는 데이터 필터링하기 import { useState } from "react";function App() { const students = [ { name: "Alice", age: 17, grade: "A" }, { name: "Bob", age: 18, grade: "B" }, { name: "Charlie", age: 16, grade: "C" }, { name: "Diana", age: 19, grade: "D" }, { name: "Elmo", age: 20, grade: "E" }, { name: "Fiona", age: 21, grade: "F" }, { name: "Gabe", age: 22, grade: "A" }, { name: "Hannah", age: 23,.. Programing/TIL 2024. 5. 21.
2024-05-20 props 개념 이해하기 props 개념은 이해했으나 손에 잘 붙지 않아 연습문제를 풀고자 한다.Message라는 이름의 컴포넌트를 만들고, text라는 props를 받아서 화면에 출력하세요.App 컴포넌트에서 Message 컴포넌트를 사용하여 "Hello, World!" 메시지를 출력하세요.// App.jsxfunction App() { return ( );}// Message.jsxfunction Message(props) { return ( {props.test} );} Programing/TIL 2024. 5. 21.
008. [part1] 리액트 환경에서 동적인 UI 만드는 법 (모달창만들기) 리액트에서 동적 UI 만드는 Step동적 UI란? 보였다 안 보였다, 뭘 누르면 보였다가 사라졌다 하거나 토글되는 UI를 말함.이런 UI를 리액트에서는 state로 UI의 상태를 나타내고 UI의 상태를 상태 변경 함수를 통해 바꿔주기만 하면 특정 조건에서 보이거나 보이지 않는 동적 UI를 만들 수 있음.HTML/CSS로 동적으로 보여질 UI를 미리 디자인한다.UI의 현재 상태를 state로 저장해두고state의 상태에 따라 UI가 보일지 말지 조건문으로 작성한다.const [modal, setModal] = useState(0);// modal창이 보였다가 안 보였다가 하게 하고 싶기 때문에 modal이라는 state를// 만들었고, 초기 상태를 숫자 0으로 설정하였음. 이것은 보이지 않는 상태라고// .. Programing/React 2024. 5. 21.
007. [코딩애플] [part1] Component 많은 div들을 한 단어로 줄이고 싶으면 컴포넌트란?리액트에서 반복되는 UI(쉽게 이야기해서 HTML영역, 물론 엄밀히 말하면 jsx 문법인 영역)을 따로 분리해서 하나의 함수로 만든 다음 간단하게 호출하는 방법을 이야기 한다.예를 들어 리액트 프로젝트를 처음 세팅하면 App.jsx에서 자바스크립트와 HTML(jsx)를 모두 여기서 작성하게 될 텐데 이것 또한 자세히 보면 function App() {}이 코드 블럭 안에 있는 하나의 컴포넌트이다.컴포넌트의 예시모달창을 HTML에서 만들었고 만약 이 태그가 복잡하고 길다면 하나의 컴포넌트로 분리해서 아래와 같이 메인 컴포넌트(보통 App.jsx)에서 호출만 해서 사용 가능하다.function App() { return ( 제목 날짜 상세내.. Programing/React 2024. 5. 21.
006. [코딩애플] [part1] array, object state 변경하는 법 state의 데이터 타입에 따른 상태변경 함수 사용법state의 자료형이 숫자형이나 문자열 등은 어떻게 수정해도 상관없으나, 배열이나 객체인 경우에는 spread operator로 깊은 복사를 해주어야 한다.만약 아래처럼 수정하면 원본 배열 자체가 덮어 씌워져 버린다.function App() { const [cities, setCites] = useState(["서울", "인천", "제주"]); return ( { setCites(["성남"]); }} > 수정하기 );}수정하기 버튼을 누르면 cites라고 상태로 정의한 배열의 첫번째 값을 '서울'에서 '성남'으로 바꾸기 위해 setCites라는 상태변경 함수를 .. Programing/React 2024. 5. 21.

티스토리툴바