현고미 노트(H-gomi's Note)

3.  데이터 표시하기- JSX는 HTML 마크업을 자바스크립트 안에 넣을 수 있게 해줍니다. - 중괄호( Curly braces ){} 는 HTML 마크업에서 자바스크립트로 "이스케이프(escape, 다른 환경으로 이동한다.)"하여 코드에서 일부 변수를 "임베드(embed, 다른 곳에 끼워넣다.)"하여 사용자에게 표시할 수 있습니다.위에 적은 중괄호에 대한 설명을 Chat GPT가 적절한 문장으로 표현해주었다."중괄호 {} 는 자바스크립트 세계로 돌아가는 문이에요."  그렇다 JSX에서 중괄호{}는 HTML마크업에서 자바스크립트의 변수를 사용할 수 있게 해준다. 예를 들어, className="avatar"는 "avatar" 문자열을 CSS로 전달하는 방식이고,src={ user.imageUrl }는 ..

코딩 공부노트/React 2025. 2. 5. 16:59

React 학습하기 매일 사용하게될 React 개념의 80%를 소개합니다. Quick Start앞으로 배울 내용1. 컴포넌트(Component) 생성 및 중첩(nest components) 방법2. 마크업과 스타일을 추가하는 방법3. 데이터를 표시(display)하는 방법4. 조건(conditions) 및 목록을 랜더링(render) 하는 방법5. 이벤트에 대응하고 화면을 업데이트 하는 방법6. 구성 요소 간에 데이터를 공유하는 방법 1. 컴포넌트 생성 및 중첩 방법(Creating and Nesting components)- React앱은 컴포넌트로 구성됩니다.(React apps are made out of components)- 컴포넌트는 UI의 일부입니다. 컴포넌트는 고유 로직이나 모양을 가집니다..

코딩 공부노트/React 2025. 2. 2. 09:00

React Hook이란? - 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줍니다. Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. https://ko.legacy.reactjs.org/docs/hooks-intro.html useEffect 란? - Class Comonent의 Life Cycle을 사용하게 해줌 * Life Cycle은 크게 3단계로 구성 (Mounting -> Upda..

코딩 공부노트/React 2023. 11. 28. 17:30

안녕하세요, 여러분! 오늘은 JavaScript의 ES6 문법 중 하나인 '구조 분해 할당(Destructuring)'에 대해 이야기해보려고 합니다. 이 기능은 코드를 더 간결하고 가독성 높게 작성할 수 있도록 도와줍니다. 1) 구조 분해 할당이란? 구조 분해 할당은 배열이나 객체에서 원하는 값을 추출하여 변수에 할당하는 방법입니다. 이를 통해 변수를 일일이 하나씩 할당하는 번거로움을 줄일 수 있습니다. 2) 배열에서의 구조 분해 할당 배열에서의 구조 분해 할당은 다음과 같이 작성할 수 있습니다. const colors = ['빨강', '파랑', '노랑']; const [firstColor, secondColor] = colors; //생략된 변수는 값을 할당하지 않습니다. console.log(firs..

코딩 공부노트/React 2023. 8. 22. 12:02

안녕하세요. 현고미입니다 오늘은 React의 Props와 State에 대해 알아보려고 합니다. 이 두 가지 개념은 React 애플리케이션을 구축하고 관리하는 데 아주 중요한 역할을 합니다. 자, 함께 살펴볼까요? Props와 State 란? Props(속성)와 State(상태)는 React 컴포넌트가 데이터를 전달하고 관리하는 방법을 의미합니다. 이 둘은 각자 다른 역할을 하지만, 모두 컴포넌트 간의 데이터 흐름을 원활하게 만들어줍니다. 1) Props: 정보 전달의 편리함 Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다. 이 데이터는 읽기 전용이며, 자식 컴포넌트에서 변경할 수 없습니다. 이런 특징 덕분에 데이터 흐름을 예측 가능하게 만들어줍니다. Props를 사용하면 컴포..

코딩 공부노트/React 2023. 8. 21. 20:03

해당 게시글은 Chat-GPT3.5를 사용하여 작성한 내용입니다. 이번 블로그 글에서는 React 애플리케이션에서 상태(State)를 관리하고 업데이트하는 방법에 대해 다뤄보겠습니다. React의 상태 관리는 애플리케이션의 동적인 변화를 다루는 핵심 부분입니다. 함께 상태 관리와 업데이트 전략을 살펴보겠습니다. 1. State 소개 React 컴포넌트 내부에서 사용하는 State는 컴포넌트의 상태를 나타내는 데이터입니다. State는 주로 컴포넌트의 동적인 데이터를 저장하고 관리하는 데 사용됩니다. 예를 들어, 사용자 입력값이나 컴포넌트의 가시성 상태 등이 여기에 해당합니다. 2. State의 초기화와 사용 컴포넌트 내에서 State를 사용하려면 `useState` 훅을 사용합니다. 아래는 State를 ..

코딩 공부노트/React 2023. 8. 14. 12:06

안녕하세요. 오늘은 Filter함수에 대한 내용을 정리하보려고 합니다. filter method는 JavaScript에서 배열의 원소들을 조건에 따라 걸러내는 메서드입니다. filter method는 콜백 함수를 파라미터로 받습니다. 콜백 함수는 배열의 각 원소에 대해 실행되며, true를 반환하면 해당 원소를 새로운 배열에 넣고, false를 반환하면 건너뜁니다. filter method는 원본 배열을 변경하지 않고, 새로운 배열을 반환합니다. react에서는 filter method를 사용하여 컴포넌트의 상태나 props로 전달받은 배열을 필터링할 수 있습니다. 예를 들어, 할 일 목록을 보여주는 컴포넌트가 있다고 가정해 봅시다. 이 컴포넌트는 상태로 todos라는 배열을 가지고 있습니다. todos..

코딩 공부노트/React 2023. 8. 13. 18:43

안녕하세요 현고미 입니다! 이번에는 React의 map을 사용한 list의 반복에서 key를 사용해야하는 이유에 대해 알아보겠습니다. React에서는 배열을 엘리먼트 리스트로 변환할 때 map 함수를 자주 사용합니다. 예를 들어, 다음과 같이 numbers 배열을 엘리먼트로 만들 수 있습니다. const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => { number }); 그러나 이 코드를 실행하면 콘솔에 다음과 같은 경고가 표시됩니다. Warning: Each child in a list should have a unique "key" prop. 이 경고는 리스트의 각 항목에 key라는 특수한 속성을 넣어야 한다는 것을 의미합..

코딩 공부노트/React 2023. 8. 4. 12:05