저번달에는 하지 못했던, 하지만 이번달에는 할 수 있었던 로컬스토리지 사용 React intro 트위틀러 더미데이터에서 트윗을 받아온다. 총 트윗 횟수를 표기한다. = 더미데이터.length css를 손본다 React SPA 트위틀러 더미데이터에서 트윗을 받아온다. SPA를 구현한다. 라우터를 통해 경로를 변경해주고, 경로에 맞는 화면을 제공한다. useNavigate를 이용하여 뒤로가기 기능을 만든다. css를 손본다. React state&props 트위틀러 더미데이터에서 트윗을 받아온다. SPA를 구현한다. 라우터를 통해 경로를 변경해주고, 경로에 맞는 화면을 제공한다. useNavigate를 이용하여 뒤로가기 기능을 만든다. 트윗을 등록하고, 등록 한 글이 최상단에 위치해야한다. props를 통해..

구현화면 리액트 트위틀러 회고 삭제 기능을 구현하겠다고 토요일 저녁시간을 모두 사용했다 ㅠㅠ 하지만 결국 구현은 못했다.. 로컬스토리지는 localstorage.remove(키 이름) 으로 삭제하거나, ocalstorage.clear()로 로컬저장소 내에 데이터를 모두 삭제한는 방법 뿐이다. 하지만 나는 모든 트윗의 데이터를 tweet이라는 로컬스토리지 key 안에 모두 넣어놨기때문에 삭제기능을 구현하려면 key안에 value를 삭제해야하는데 로컬스토리지의 메소드만으로는 불가능 한 것 같다. 머리를 박고 고민을 하던 중 삭제기능을 구현할 실마리를 찾았다. 로컬스토리지JSON.parse를 이용해 배열로 바꿔서 가져온다 => 로컬스토리지 배열을 splice()로 원하는 요소를 제거한다. => 원하는 요소가 ..

onChange function NameForm() { const [name, setName] = useState(""); // const [초기값, set함수] = 초기값은" " const handleChange = (e) => { // 이벤트가 발생하면 setName(e.target.value); // set함수를 이용해서 이벤트타겟에 입력된 value값으로 초기값을 업데이트한다. } return ( // input 창에 이름을 입력하면 h1크기로 이름이 출력되는 컴포넌트 {name} ) }; import React, { useState } from "react"; import "./styles.css"; function SelectExample() { const [choice, setChoice] ..

React State & props 이해하기 10시에 스터디 Til 참여하기

Props props는 외부로 부터 전달받은 값. 상위 컴포넌트로부터 넘겨받는다. props는 immutable한 데이터이며, 부모에서 자식으로 혹은 구성 요소 자체에서 데이터를 전달하는 데 사용된다. 클래스 컴포넌트뿐만 아니라 함수형 컴포넌트에서도 사용할 수 있다. 수ㅏㅇ위 컴포넌트에서 넘ㅇ겨받은 prop State state는 내부에서 변화하는 값 컴포넌트 내에서만 지지고 볶고 변화한다. 변수가 업데이트된다? 신경쓰지않는다. state가 업데이트 된다? UI렌더링 한다. UI렌더링 하기 좋은 state와 잠시 값을 가지고있기 좋은 변수의 역할을 분리하기 시작했다. useState()는 길이 2 짜리 Array를 반환한다. 초기값을 담고있는 State.값과 이 State를 업데이트해주는 set함수를 반..

구현화면 느낌 점 SPA의 개념에 대해 이해가 됐다. 전통적인 웹페이지는 요청을 보내면 HTML파일을 통째로 보내주는 방식이였기에, 서버에 불필요한 트래픽도 많이생기고 유저도 기다리는 시간이 길어 질 수 밖에 없는 구조였다. 예를 들자면 나는 햄버거가게에서 감자튀김만 먹고싶지만 감자튀김을 먹으려면 햄버거세트를 시켜야하는 상황인것이다. 주문을 받은 주방은 감자튀김만 원하는 유저맘도 모르고 열심히 먹지도 않을 햄버거까지 만드는 바람에 감자튀김을 받아보는 시간이 늦어지게 된다. 하지만 SPA는 감자튀김을시키면 감자튀김만 내오는 아주 스마트한 방식이기때문에, 유저는 좀 더 쾌적한 경험을 할 수 있다.