본문 바로가기

부트캠프교육중301

state state: 컴포넌트내에서 변할수있는값 리액트에선 자주 바뀌는 중요한 데이터를 변수말고 state로 저장해서 써라!! state는 변경되면 HTML이 자동으로 재렌더링이 된다(HTML이 새로고침없이도 스무스하게 변경됨) #state를 다루는 방법 중 하나로 useState라는 특별한 함수를 제공한다. #useState를 이용하기 위해서는 react로부터 useState를 불러와야한다. import { useState } from "react"; import React, { useState } from "react"; #이후 useState를 컴포넌트 안에서 호출해준다. 호출해준다는건 state라는 변수를 선언하는 것과 같으며, 변수의 이름은 아무이름이나 상관없다. 일반적인 변수는 함수가 끝날때 사라지지만.. 2023. 1. 26.
Props #state (상태) -살면서 변할수있는값 -컴포넌트의 사용중 컴포넌트 내부에서 변할수있는값 (외부의 영향을 받지않고) -state는 컴포넌트내부에서 변화하는값, 외부의 영향을 받지않고 / 나이, 현재사는곳, 취업여부, 결혼연애여부 -props는 외부로부터 전달받은값 /이름, 성별 -컴포넌트의 속성(property)를 의미한다. 성별이나 이름처럼 변하지 않는 외부로부터 전달받은값으로, 웹애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다. -부모 컴포넌트(상위컴포넌트)로부터 전달받은값이다. props를 함수의 전달인자처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 react엘리먼트를 반환한다. 따라서 컴포넌트가 최초 렌더링 될때 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할수있.. 2023. 1. 26.
React Router(BrowserRouter, Routes, Route, Link) react router(react-router-dom) 라우팅에 따라 다른 뷰를 보여주기 위해서 react에서는 react router라는 라이브러리를 많이 사용한다. #라우팅(routing) -다른 주소에 따라 다른 뷰를 보여주는 과정 -경로에 따라 변경한다 라는 의미 -react spa에서는 라우팅을 위해 react router라는 라이브러리를 가장 많이 사용한다. #react router주요 컴포넌트 크게 세가지로 나뉜다. 라우터 역할을 하는 BrowserRouter 경로를 매칭해주는 Routes, Route 경로를 변경하는 역할을 하는 Link 이 컴포넌트들을 사용하기 위해서는 react router 라이브러리에서 따로 불러와야한다. import {BrowserRouter, Routes, Rout.. 2023. 1. 25.
wireframe, mockup # wireframe - 디자인에 들어가기 전단계로 선(wire)을 이용해 윤곽선을 잡는것. -이작업을 통해 개발자는 디자인 컨셉과 사이트 기능에 대한 이해를 할수있다. -웹페이지의 레이아웃과 UI요소 등에 대한 뼈대. #목업 mockup -데스크톱, 스마트폰의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인한것 -데모시연, 평가를 위한 최소한의 기능만 담은 모형 2023. 1. 25.

티스토리툴바