Je개발 일지

1. 일반 변수로 충분하지 않은 경우 컴포넌트를 새 데이터로 업데이트 하기 위해서는 두 가지 작업이 필요핟 렌더링 사이에 데이터를 유지한다 새로운 데이터로 컴포넌트를 리렌더링하도록 촉발해야 한다 useState 훅이 이 두가지를 제공한다 렌더링 사이에 데이터를 유지하며 state 로 저장한 데이터가 업데이트 되면 React 컴포넌트가 리렌더링되도록 만든다. 2. state 변수 추가하기 state 변수를 추가하기 위해서는 파일 상단에 useState 를 react 라이브러리에서 import 해야 한다 import { useState } from 'react'; 그리고 저장할 변수를 다음과 같이 사용한다 // [값을_저장할_변수, 값을_업데이트할_함수] = useState(변수_초기화_값) const [i..

1. 이벤트 핸들러 추가하기 이벤트 핸들러를 추가하려면 먼저 함수를 정의한 다음 JSX 태그에 props 로 전달해야 한다 export default function Button() { return ( I don't do anything ); } 이 버튼을 클릭하면 Alert 을 띄우는 기능을 추가하려면 다음의 세 가지 단계를 거쳐야 한다 Button 컴포넌트 안에 handleClick (이름은 단순히 함수명으로 원하는 대로 지으면 됨) 이라는 함수를 선언 해당 함수 내부의 로직 구현 태그에 onClick porps 로 handleClick 추가 export default function Button() { function handleClick() { alert('You clicked me!'); } r..

화면의 일부 항목은 입력에 따라 업데이트 된다. 이번 챕터에서는 state를 업데이트하고, 시간에 따라 다른 값을 보여주는 컴포넌트를 작성하는 방법을 배울 것 1. 이벤트에 응답하기 이벤트 핸들러는 사용자 상호작용에 반응해서 호출되는 자체 함수다 과 같은 기본 제공 컴포넌트는 onClick 과 같은 기본 제공 브라우저 이벤트만을 지원한다 하지만, 컴포넌트 생성하고 이벤트 핸들러 props 로 원하는 이름을 지정할 수 있 function Toolbar({ onPlayMovie, onUploadImage }) { return ( Play Movie Upload Image ); } export default function App() { return ( alert('Playing!')} onUploadImag..

React는 컴포넌트를 엄격하게 순수 함수로 작성하도록 강제한다 그렇기에 React 코드를 짤 때 몇 가지 규칙을 준수해야만 한다. 1. 순수성 : 수식으로서의 컴포넌트 컴퓨터 과학에서 순수 함수는 다음의 특징을 지닌다. 자신의 일에만 신경 쓴다 : 호출되기 전에 존재했던 객체나 변수를 변경하지 않는다 동일한 값을 입력 받으면 항상 동일한 결과를 반환해야 한다. : 컴포넌트가 이런 순수성을 유지한다고 하는 건 어떤 데이터를 받든, 그 데이터를 받을 때마다 항상 동일한 화면을 보여줘야 함을 의미한다. 2. 사이드 이펙트 React 렌더링 프로세스는 항상 순수해야 한다. : 컴포넌트는 JSX 만을 반환해야 한다. : 렌더링 존재한 객체나 변수를 변경해서는 안 된다. let guest = 0; function..

Javascript 배열 메서드를 활용해서 데이터 배열을 조작할 수 있다 1. 배열에서 데이터 렌더링하기 Creola Katherine Johnson: mathematician Mario José Molina-Pasquel Henríquez: chemist Mohammad Abdus Salam: physicist Percy Lavon Julian: chemist Subrahmanyan Chandrasekhar: astrophysicist 이런 목록 항목의 유일한 차이점은 콘텐츠, 즉 데이터다 이런 데이터들을 자바스크립트 배열에 저장하고, map 이나 filter 등을 사용해 컴포넌트 목록을 렌더링할 수 있다. Step 1) 데이터를 배열에 넣기 const people = [ 'Creola Katherin..

컴포넌트는 서로 다른 조건에 따라 다른 것을 보여줘야 하는 경우가 종종 발생한다 1. 조건부로 반환하는 JSX 상품이 포장됐는지를 표시하는 여러 컴포넌트를 렌더링하는 컴포넌트가 있다고 가정해보자. function Item({ name, isPacked }) { return {name}; } export default function PackingList() { return ( Sally Ride's Packing List ); } 여기서 Item 컴포넌트에 isPacked prop 이 true 인 경우, 패킹된 아이템에 체크 표시를 추가하고자 한다면 if/else 구문으로 렌더링할 수 있을 것 if (isPacked) { return {name} ✔; } return {name}; 위 방법은 isPack..

스프린트 리뷰에서 충격적인 소식을 들었다. 오늘이 React 마지막 스프린트 리뷰였다는 거였다. ...벌써요???? 진짜 벌써요??? 내일부터는 Redux 에 대해서 기초부터 배우기는 하는데 어라? 나 지금 리액트 걸음마 뗀 거 맞나...? 내가 벌써 부트 캠프에서 더 React를 듣지 않아도 된다고?? 아닌데..? 당혹감이 너무 컸다. 물론, 그렇다고 지금까지 배운 것들이 별 거 없었다는 얘기는 아니다. 엄청 배웠다. 뒤돌아보니 지금까지 React로 한 과제들도 꽤 있었다. 처음 컴포넌트 만드는 것부터 시작해서 서버 불러 오기, 스타일 꾸미기 등 생각보다 React를 많이 쓴 것 같다. 하지만 어... 안 돼.. 이건 아니야 ㅠㅠㅠㅠ 아직 더 배워야할 게 많은 것 같은데 역시 6개월 풀 스택 커리큘럼이..

저번 시간에 이어서 남은 과제를 수행하겠다. 1), 4), 6)은 했고 이제 input창 관리인 2), 3), 5) 남았다 왼쪽 스크린샷은 최초 렌더링됐을 때의 화면이다. 1) 저 인물 리스트들을 객체를 요소로 하는 배열로 받은 후, 하드 코딩이 아니라 이 배열을 이용해서 여러 리스트가 나오도록 출력할 것이다 2) input 창도 두 개로 관리할 예정이다. 3) 왼쪽에 있는 스크린샷처럼 input에서 이름과 전공을 사용자로부터 입력을 받은 후 등록 버튼을 누르면 상단의 리스트에 이름과 전공이 추가되는 화면을 넣을 것이다. (현재 화면에선 '추민하'가 추가됨) 4) 인물 부분은 태그로 감싸서 Bold 처리를 하고, 전공은 소괄호로 묶어서 표현한다. 5) input 창은 보이는 것처럼 placeholder ..

오늘 할 것을 설명하자면 옆의 사진들과 같다. CSS 는 편의상 margin 값만 추가했다. 왼쪽 스크린샷은 최초 렌더링됐을 때의 화면이다. 1) 저 인물 리스트들을 객체를 요소로 하는 배열로 받은 후, 하드 코딩이 아니라 이 배열을 이용해서 여러 리스트가 나오도록 출력할 것이다 2) input 창도 두 개로 관리할 예정이다. 3) 왼쪽에 있는 스크린샷처럼 input에서 이름과 전공을 사용자로부터 입력을 받은 후 등록 버튼을 누르면 상단의 리스트에 이름과 전공이 추가되는 화면을 넣을 것이다. (현재 화면에선 '추민하'가 추가됨) 4) 인물 부분은 태그로 감싸서 Bold 처리를 하고, 전공은 소괄호로 묶어서 표현한다. 5) input 창은 보이는 것처럼 placeholder 처리를 해줄 것이다. 6) 마지..

[ 오늘의 TODO ] 코드 스테이츠) 목~금 내용 복습 // React SPA // React State & Props // sprint Advanced 패스트 캠퍼스) 인강 3개 이상 듣기 // optional 생활) 물 1L 이상 마시기 생활) 수-토-일 운동 // 공부하느라 운동할 시간 없어. 허튼 핑계 아니야. 진심이야. [ 오늘의 복습 ] 1. React SPA 1-1) SPA 란? SPA 는 Single Page Application의 약자다. 이전에 페이지를 넘어갈 때면 HTML을 완전히 새것으로 바꾸는 작업을 했으나 현재는 이 SPA를 통해 업데이트에 필요한 데이터만을 가져오는 방식이 개발됐고 보편화됐다. 많은 데이터를 가져오지 않으므로 사용자의 행동에 빠르게 반응하며, 서버 과부하의 위..