React | State가 무엇일까? (State: A Component's Memory) State: A Component's Memory 컴포넌트는 상호 작용의 결과로 화면에 표시되는 내용을 변경해야 하는 경우가 많습니다. 예를 들면 폼에 입력하면 입력 필드가 업데이트되고, "다음"을 클릭하면 표시되는 이미지가 변경되고, "구매"를 클릭하면 제품을 장바구니에 넣어야 합니다. 컴포넌트는 이런 현재 입력 값, 현재 이미지, 장바구니 등을 "기억"해야 합니다. React에서는 이러한 종류의 컴포넌트별 메모리를 state라고 합니다. When a regular variable isn’t enough handleClick() 이벤트 핸들러가 지역 변수인 인덱스를 업데이트하고 있습니다. 그러나 다음 두 가지 사항으로 인해 지역변수가 업데이트된 사항이 표시되지 않습니다. 지역 변수는 렌더링 간에 유지되.. 2021. 12. 3. React | 이벤트에 응답하기 (Responding to Events) React를 사용하면 JSX에 이벤트 핸들러를 추가할 수 있습니다. 이벤트 핸들러는 클릭, 호버링, 양식 입력에 초점 맞추기 등과 같은 사용자 액션에 대한 반응으로 트리거되는 고유한 기능입니다. 이벤트 핸들러 추가하기 (Adding event handlers) 이벤트 핸들러를 추가하기 위해서는 먼저 함수를 정의한 다음 JSX태그에 Prop로 전달합니다. 버튼을 만듭니다. Button 컴포넌트 안에 handleClick 함수를 선언합니다. handleClick 함수에는 alert로 메시지를 보여줍니다. button에 onClick={handleClick}을 추가합니다. handleClick함수는 button에 prop로 전달됩니다. export default function Button() { functi.. 2021. 12. 2. 추천받은 읽을거리 Adobe에서 공개한 오픈소스 React UI 컴포넌트 라이브러리 https://react-spectrum.adobe.com/react-aria/ React Aria A library of React Hooks that provides accessible UI primitives for your design system. react-spectrum.adobe.com Matt Turck의 AI 최신 트렌드 https://www.youtube.com/watch?v=f9kW4GNU51g 요약 https://news.hada.io/topic?id=5299 2021년 데이터/ML/AI 업계 지도와 최신 트렌드 | GeekNews 이미지 1장으로 정리한 2021 Data & AI Landscape 와 상세한 설명1.. 2021. 11. 12. VS CODE에서 SSH로 Github 연동 변경하기 1. SSH 생성 # 먼저 SSH가 생성이 되어있는지 확인 $ cd ~/.ssh # .ssh 폴더가 없으면 생성이 되어 있지 않은 것이므로 생성 $ ssh-keygen -C "github email" 2. Git 설정 변경 2-1. git 주소를 확인해준다. $ git remote -v 2-2. ssh 주소로 remote 주소 변경 $ git remote set-url origin ${ssh-url} 참고한 블로그 VS CODE에서 SSH로 Github 연동하기 snutiise.github.io 2021. 11. 12. React - List 를 Render하는 방법 (Rendering Lists) return {listItems}; Rendering Lists JavaScript 배열 methods인 filter()와 map()를 사용하여 데이터를 다룰 수 있다. Rendering data from arrays 인터페이스를 구축할 때 동일한 구성으로 되어있는 요소들을 렌더링할 때가 있다. Creola Katherine Johnson: mathematician Mario José Molina-Pasquel Henríquez: chemist Mohammad Abdus Salam: physicist Percy Lavon Julian: chemist Subrahmanyan Chandrasekhar: astrophysicist 위의 코드는 tag로 되어 있는 contents이다. 1.데이터를 array안으.. 2021. 11. 8. react - 조건적 렌더( Conditional Rendering ) Conditional Rendering component들은 종종 상황에 따라 다르게 표시해야하는 상황이 필요하다. React는 JavaScript 문법인 if, &&,? : 를 이용하여 JSX를 다르게 표시해줄 수 있다. Conditionally returning JSX if 문법을 통해서 JSX를 다르게 rendere 해줄 수 있다. function Item({ name, isPacked }) { if (isPacked) { return {name} ✔; } return {name}; } export default function PackingList() { return ( Sally Ride's Packing List ); } Conditionally returning nothing with nul.. 2021. 11. 4. 이전 1 2 3 4 5 다음
