분류 전체보기 289

[2024~2025 동계모각코] 6회차 결과

52강변수를 이용해 화면에 보일 내용을 그때그때 값을 다르게 저장해줄 수 있음ui 업데이트 시 리액트에 의해 재평가되어야 함 >> 이게 감지되면 업데이트 될 거임기본적으로 리액트는 코드를 한 번밖에 실행하지 않는것을 반드시 염두에 두기리액트는 각각의 컴포넌트 함수를 볼때마다 실행 > >버튼이 4개면 4번 실행컴포넌트 함수가 재실행되어야 함을 알려줄 방법이 필요함 >> 상태53강상태import { useState } from ‘react’;를 통해 변수를 추가함그후 App() 에서 useState();를 통해 호출 (반드시 함수의 최상위에서 호출되어야 함)내부 함수 중첩, if, loop문 사용 불가selectedTopic : 현재의 스냅샷 (초기값이 저장됨)setSelectedTopic : 항상 함수임(..

[2024~2025 동계모각코] 5회차 결과

41강JSX에는 {} 사용 가능 : IN 시작과 끝요소 태그 사이, 속성 값으로 사용 가능자바스크립트 표현 아무거나 넣을 수 있음 > 이 내용의 결과가 화면에 출력이 되는 것임reactDescription : 상수로 저장되어 있음! 배열 형태로변수 또는 상수로 미리 저장해놓을 수도 있음이렇게 하면 jsx 코드가 좀 단정해지니까 이걸 선호함42강이미지도 동일한 문법으로 작업할 수 있음img src 이런 거 이용해서 해도 되지만 최적의 방법은 아님작업물 배포시 이미지가 사라질 수도 있기 때문배포 시 모든 코드가 변환 및 최적화되고 함께 묶여짐 > 이 과정에서 무시되거나 유실될 수 있음import 사용하기!!!!import reactImg form ‘./상대경로’ > 이 형태로 저장해준다.그러고 기존의 img..

[2024~2025 동계모각코] 4회차 결과

34강웹사이트 만들어볼 거임 (정적 + 동적)리액트의 기초 개념 학습 예정컴포넌트, JSX, STATE데이터 사용 방법유저 이벤트 상호작용상태! : 고정적 웹사이트 역동적으로 변화시키는데 중요앱 : 동적 | 정적35강컴포넌트 : 잠재적으로 재사용 가능한 구성 요소리액트 개발자가 생성 가능컴포넌트 결합으로 리액트 앱이 만들어짐UI를 여러 컴포넌트 결합 >> 어느 웹사이트든 다 마찬가지임헤더, 핵심, 상호작용 모두 컴포넌트로 볼 수 있음(사용자에 따라 개념이 달라서 개수 다 다름)HTML, CSS, JS를 감싼다고 볼 수 있다복잡한 사용자 인터페이스를 쪼개서 관리 가능접근이 쉽다가 매우 장점비슷한 코드는 함께 저장됨개발 과정 단순해짐디자인, 개발 둘 다 개발 원칙 따름36강자료 모음https://github..

[2024~2025 동계모각코] 3회차 결과

2025.01.14 수강 완료 화면23강배열 및 객체의 분해const userNameData = ["Max", "Schwejl"]// 기존의 분해 방식const firstName = userNameData[0];// 더 짧은 방식const [firstName, lastName] = ["Max", "Schwejl"];이렇게 해두면 firstName을 치면 자동으로 Max가 선택된다.분해를 통해 각 변수에 값을 자동으로 젖아해놓는 것이다.const user = { name: "Max", age: 34};// 기존 방식const name = user.name;const age = user.age;// 더 짧은 방식const {name: userName, age} = { name: "Max", age: 34}객..