분류 전체보기 (83) 썸네일형 리스트형 [ React ] 시작하기 : 빠르게 시작하기(컴포넌트 간에 데이터 공유하기) 컴포넌트 간에 데이터 공유하기이전 예시에서는 각각의 MyButton 에 독립적인 count가 있었고, 각 버튼을 클릭하면 클리한 버튼의 count만 변경되었습니다.처음에 각 MyButton의count State는 0 입니다.첫 번째 MyButton이 count를 1로 업데이트 합니다.하지만 데이터를 공유하고 항상 함게 업데이트하기 위한 컴포넌트가 필요한 경우가 많습니다.두 MyButton 컴포넌트가 동일한 count를 표시하고 함께 업데이트하려면, state를 개별 버튼에서 모든 버튼이 포함된 가장 가까운 컴포넌트로 “위쪽” 으로 이동해야 합니다.이 예시에서는 MyApp 입니다.처음에 MyApp의 count state는 0이며 두 자식에게 모두 전달됩니다.클릭 시 MyApp은 count를 1 로 업데이트.. [ React ] 시작하기 : 빠르게 시작하기(Hook 사용하기) Hook 사용하기use 로 시작하는 함수를 Hook 이라고 합니다. useState는 React에서 제공하는 내장 Hook 입니다.다른 내장 Hook은 API 참고서 에서 찾아볼 수 있습니다.또한 기존의 것들을 조합하여 자신만의 Hook을 작성할 수도 있습니다.Hook은 다른 함수보다 더 제한적입니다.컴포넌트(또는 다른 Hook)의 상단에서만 Hook을 호출할 수 있습니다.조건이나 반복에서 useState 를 사용하고 싶다면 새 컴포넌트를 추출하여 그곳에 넣으세요.[ API 참고서 ]내장 React HookHook을 사용하면 컴포넌트에서 다양한 React 기능을 사용할 수 있습니다. 내장된 Hook을 이용하거나 이를 결합하여 자신만의 Hook을 만들 수 있습니다. 이 페이지에는 React에 내장된 모든 .. [ React ] 시작하기 : 빠르게 시작하기(이벤트에 응답하기) 이벤트에 응답하기컴포넌트가 특정 정보를 “기억” 하여 표시학를 원하는 경우가 종종 있습니다.예를 들어 버튼이 클릭된 횟수를 세고 싶을 수 있습니다.이렇게 하려면 컴포넌트에 state를 추가하면 됩니다.먼저, React에서 useState를 가져옵니다.import { useState } from 'react';이제 컴포넌트 내부에 state 변수를 선언할 수 있습니다.function MyButton() { const [count, setCount] = useState(0); // ...}useState로부터 현재 state(count) 와 이를 업데이트할 수 있는 함수(setCount)를 얻을 수 있습니다.이들을 어떤 이름으로도 지정할 수 있지만 [something, setSomething] 으.. 한국사 71회 후기, 12일만에 1급 받기 원본 : (https://unsam-doodle.tistory.com/121)한국사 71회 후기: 12일 만에 1급 받기토스 시험 하루 전... 공부하기 싫어서 작성토스 근데 ㄹㅇ 다시 볼 듯... 하루 벼락치기 불가...중간에 공부 안 한 날이 있어서 실질적으로는 10일 정도 공부한 것 같아.공부 시작 전 자기 진단최태성 40강 정독 가능?→ 절대 불가. 강의 듣다가 시간 다 갈 것을 알았기 때문에 모든 강의를 다 듣는 건 포기.게으름 안 피울 수 있는가?→ 절대 불가. 적당히 시간을 쪼개서 공부하기.이 전제를 깔고 공부를 시작했어.📅 공부 타임라인[12일 전]선택한 강의: 최태성의 '7일의 기적'→ 1-2일 만에 들을 수 있다는 후기가 많았지만, 나는 4일 동안 강의 듣고 2일은 필기한 판서 복습하.. [ React ] 시작하기 : 빠르게 시작하기(리스트 렌더링 하기) 리스트 렌더링 하기컴포넌트 리스트를 렌더링하기 위해서는 for 문 및 map() 함수와 같은 자바스크립트 기능을 사용합니다.예를 들어 여러 제품이 있다고 가정하겠습니다.const products = [ { title: 'Cabbage', id: 1}, { title: 'Garlic', id: 2 }, { title: 'Apple', id: 3 },];컴포넌트 내에서 map() 함수를 사용하여 제품 배열을 항목 배열로 변환 합니다.const listItems = products.map(product => {product.title} );return ( {listItems});에 key 어트리뷰트가 있는 것을 주목하세요.목록의 각 항목에 대해, 형제 항목 사이.. [ React ] 시작하기 : 빠르게 시작하기(조건부 렌더링) React에서 조건문을 작성하는 데에는 특별한 문법이 필요 없습니다.일반적인 자바스크립트 코드를 작성할 때 사용하는 것과 동일한 방법을 사용합니다.예를 들어 if문을 사용하여 조건부로 JSX를 포함할 수 있습니다.let content;if (isLoggedIn) { content = ;} else { content = ;}return ( {content} );더욱 간결한 코드를 원한다면 조건부 삼항 연산자를 사용할 수 있습니다.이것은 if문과 달리 JSX 내부에서 동작합니다. {isLoggedIn ? ( ) : ( )}else 분기가 필요하지 않으면 더 짧은 && 연산자를 사용할 수도 있습니다. {isLoggedIn &.. [ React ] 시작하기 : 빠르게 시작하기(데이터 표시하기) JSX를 사용하면 JavaScript에 Markup을 넣을 수 있습니다.중괄호를 사용하여 JavaScript 변수나 표현식을 JSX 안에 삽입할 수 있으며,이를 통해 사용자에게 동적으로 데이터를 표시할 수 있습니다.아래의 예시는 user.name을 표시합니다.return ( {user.name} );JSX 어트리뷰트에서는 문자열을 따옴표로 감싸는 방식 외에도,중괄호 {}를 사용해 자바스크립트 표현식을 직접 삽입할 수 있습니다.예를 들어 className="avatar" 는 "avatar" 문자열을 CSS로 전달하지만src={user.imageUrl}는 자바스크립트 user.imageUrl 변수 값을 읽은 다음 해당 값을 src 어트리뷰트로 전달합니다.return ( );JS.. [ React ] 시작하기 : 빠르게 시작하기(스타일 추가하기) React에서는 className 으로 CSS 클래스를 지정합니다.이것은 HTML의 class 어트리뷰트와 동일한 방식으로 동작합니다.그 다음 별도의 CSS 파일에 해당 CSS 규칙을 작성합니다./* In your CSS */.avatar { border-radius: 50%;}React는 CSS 파일을 추가하는 방법을 규정하지 않습니다.가장 간단한 방법은 HTML에 태그를 추가하는 것입니다.빌드 도구나 프레임워크를 사용하는 경우 해당 문서를 참고하여 프로젝트에 CSS 파일을 추가하는 방법을 알아보세요. 이전 1 2 3 4 5 ··· 11 다음