useRef는 더욱 이해가 잘 가지않는다. 재생목록을 다 듣고 시작해보자. 유투브 별코딩 useRef useRef 란? useRef는 React Hooks API 중 하나로, 함수형 컴포넌트에서 DOM 요소에 직접 접근하거나, 컴포넌트 내에서 전역적으로 사용되는 변수를 만들 때 사용하는 함수다. useRef는 객체 형태의 current 프로퍼티를 가지고 있는데, 이 프로퍼티를 사용하면 컴포넌트가 다시 렌더링 되더라도 변수의 값이 유지된다. 즉, useRef를 사용하면 컴포넌트 내에서 일어나는 변화를 저장하고, 이를 다음 렌더링에서도 유지할 수 있다. 이를 통해, 함수형 컴포넌트에서도 클래스형 컴포넌트와 같은 기능을 수행할 수 있다. useRef 의 필요성 useRef는 주로 다음과 같은 상황에서 필요로 ..

01. 다음 중 CDD(Component Driven Development)에 대한 설명으로 옳은 것을 모두 고르세요. A. 부품단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있다. B. React 환경에서 CDD를 지원하기 위한 툴 중 하나는 Storybook이 있다. C. 하향식 개발에 적합한 방법이다. D. 재사용할 수 있는 컴포넌트를 개발할 수 있다 더보기 A. 부품단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있다. B. React 환경에서 CDD를 지원하기 위한 툴 중 하나는 Storybook이 있다. D. 재사용할 수 있는 컴포넌트를 개발할 수 있다. 위의 설명들이 모두 CDD(Component Driven Development)에 대한 옳은 설명입니다. CDD는 UI 컴포..

먼저 Styled Components를 어떻게 쓰는지 이해가 잘 안되서 생활코딩을 통해 알아보고 시작! 유투브 생활코딩 style-component Styled-Component 란? Styled Components는 React 애플리케이션에서 컴포넌트 기반 CSS 스타일링을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. 이 라이브러리는 2016년에 Max Stoiber와 Glen Maddern에 의해 개발되었습니다. Styled Components는 CSS-in-JS 스타일링 라이브러리 중 하나로 분류됩니다. 이것은 JavaScript 코드 내에서 CSS 스타일링을 작성할 수 있게 해주는 방식입니다. 이는 React 애플리케이션에서 컴포넌트 기반 스타일링을 수월하게 할 수 있으며, 여러 장점을 제공..

문제1. React에서 이벤트를 처리하는 방식으로 옳은 것을 고르세요. A.이벤트 종류를 설정할 때 PascalCase로 설정해야 한다. B.이벤트에 전달하는 값은 함수여야 한다. C.이벤트 핸들러를 설정할 때 반드시 호출연산자 ()를 이용해서 바로 함수를 호출해야 한다. D.이벤트 핸들러는 props로 전달할 수 없다. 더보기 A. React에서는 이벤트 이름을 camelCase로 작성해야 합니다. 예를 들어 onClick, onChange 등이 일반적입니다. PascalCase는 잘못된 형식입니다. B. 이벤트에 전달하는 값은 함수여야 한다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. C. React에서는 이벤트 핸들러를 설정할 때 함수를 호출하지 않고 함수 자체를 전달해야 ..

map을 이용한 반복 내장 고차 함수 map에서 배열 메서드 map의 특성 배열의 각 요소를 특정 논리(함수)에 의해 다른 요소로 지정(map)합니다. 배열의 각 요소(post)를 특정 논리(postToElement 함수)에 의해 다른 요소로 지정(map) 합니다. 블로그 포스트가 100개인 경우를 상상해 봅시다. 이런 상황에서는 블로그 포스팅이 늘어날 때마다 매일 코드를 변경해야만 합니다. 데이터가 변경될 때마다, 알아서 렌더링할 수는 없을까요? React에서는 이런 문제를 해결하기 위해서 배열 메서드 map을 활용합니다. const posts = [ { id : 1, title : 'Hello World', content : 'Welcome to learning React!' }, { id : 2, ..

리액트는 무엇인가? 리액트는 프론트엔드 개발을 위한 Javascript 오픈소스 라이브러리입니다. 리액트 3가지 특징 선언형 리액트는 한 페이지를 보여주기위해 기존 HTML / CSS / JS 로 나눠서 적기보다 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향합니다. (*JSX는 아래 설명) // JSX로 작성된 코드 // 하나의 파일에 명시적으로 작성할수 있는 JSX를 활용 const Weather = () => ( ) 컴토넌트기반 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트 기반으로 개발합니다. 컴포넌트로분리하면 서로 독립적으로 재사용이 가능하고 기능자체에 집중하여 개발할 수 있습니다. //컴포넌트로 분류 const Cart = ({items}) =>..