# Props

quin1392

기본 js에서 react로 넘어오며 생겨난 state와 컴포넌트에서 다른 컴포넌트를 불러올 때 사용하는 props에 대해 알아보겠습니다.

kimnew6

컴포넌트의 props에 대해 알아보자 props는 properties의 줄임말. 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용 한다. 결과를 보면, Home.jsx에서 props로 name, color, background 값을 Hello.jsx에게 객체 형태로 전달 된 것을 볼 수 있다. 여기서, 비구조화 할당 문법을 사용하면...

dnjsp

React의 컴포넌트에서 관리하는 데이터로 크게 Props 와 State 가 있다. 이 둘은 컴포넌트에서 데이터를 관리할 때 사용하는 개념으로 굉장히 중요하므로 꼭 알고 있어야 한다.

rlatjsdn147

2주차.. 주말에 생활패턴에 적응하느라 힘들었던 몸을 그나마 좀 쉴.... 수 있(지 않았다)는 시간을 가지고 2주차가 시작됬다.저번주에 잠시 배운 ..또는 짚고 넘어간 삼항연산자.. 솔직히 썩 익숙하지는 않은 기호이다..여전히 익숙하지 않은 것 같다. 알고리즘 문제를

mh-yeo

Props stand for "Properties." They are read-only components. It is an object which stores the value of attributes of a tag and work similar to the HTM

cadyky95

• onChange 함수는 우리가 작성한 Javascript를 통해 변화가 일어났는지 탐지해줌.• event 발생 시 handleInput 함수 실행• handleIdInput은 이벤트를 인자로 받음• event가 일어난 요소에 담긴 value 값 (event.targ

tino-kim

부모 컴포넌트에서 내가 원하는 방향으로 props 설정하고, 자식 컴포넌트에서 실행한다.

sorin44

map 함수를 활용해 댓글 목록을 구현해주세요.댓글 하나를 컴포넌트화 시켜주세요.부모의 state 에 저장된 댓글 데이터에 Array.map() 메소드를 적용해 댓글의 개수만큼 댓글 컴포넌트가 나타나게 해주세요.필요한 데이터를 props 로 넘겨주세요.기존에 보였던 대

hmds1606

코드를 한 페이지에 작성할 때 1000줄, 10000줄 길어진다면 어떡할까❓ 위에서 어떤 코드를 작성한 줄도 모르게 되고 이름과 관련 함수들을 찾으려면 한참 걸리게 되는 것이 현실이다. 이러한 불편함을 방지하기 위해 폴더구조체계화를 해준다면 더 빠르고 간결하게 코드를

sehee-xx

props부모 컴포넌트가 자식 컴포넌트에게 물려주는 데이터 (변수, 함수)컴포넌트를 두개로 나누면서 데이터와 기능의 연결고리가 끊어지게 된다.이를 연결해주는 것이 props이며, props는 부모가 가지고 있는 변수, 함수를 자식에게 물려주는 것이다. 부모 컴포넌트가

sehee-xx

실무용 폴더구조 프로젝트를 만들 때 폴더 구조는 굉장히 중요하다. 실무에서 사용하는 폴더 구조는 여러가지 방법이 존재하는데, 이러한 방법들을 패턴이라고 부른다. 리액트에서 사용하는 유명한 패턴으로는 container, presentational 패턴과 atomic 패턴이 있다. > container / presentational 패턴 container...

ka0son

Hook 이란? React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이, state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리라고 할 수 있다. Hook의 특징 함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다. 함수 컴포

ehrbs2021

React Typescript에서 styled-components 적용시Props에 Interface&Type을 지정하는 5가지 방법

favorcho

컴포넌트를 만들 때 재사용이 가능할 만한 부분이 있다. 그런 것은 여러 조각으로 나눠놓으면 재사용이 가능할 뿐더러 가독성도 좋아진다. 컴포넌트의 개념을 살펴보자.컴포넌트를 정의하는 가장 간단한 방법은 JS 함수를 작성하는 것이다.위의 함수는 데이터를 가진 하나의 "pr

sorin44

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)" 할 수 있게 해주는 함수입니다.  - React 공식 문서 -Hook은 class 안에서는 동작하지 않습니다.대신 class 없이도 Re

koboolean

React-2.1 Component, Props

jinhengxi

저번 포스팅에서는 기본적인 props에 대한 개념과 사용법에 대해서 공부해보았다이번에는 업그레이드된 props 사용 방법을 알아보자...말이 참 어렵다. 풀어서 설명하자면, 객체의 구조를 해체하고 변수에 대입한다는 것이라고 한다.대충 이해가 되는가? 바로 적용해보자무엇

jinhengxi

리액트에서 데이는 위에 아래로, 즉 부모 컴포넌트에서 자식 컴포넌트로 진행되는 단방향의 흐름을 가진다. 자식 컴포넌트가 부모 컴포넌트에 있던 state를 쓰고 싶으면 그냥 쓰면 안되고 props로 전송해서 써야한다는 것이다. 뭐라는건지 빨리 알아보자먼저 Content

bufo_g_p

하나의 컴포넌트에 선언되어 있는 변수, 객체 등의 값들을 다른 컴포넌트에게 전달할 수 있게 해준다

parkjisu6239

react의 state, props, lifecycle에 대해 알아보자. fucntional로 작성하였고, useEffect Hook을 사용하였다. 전체 코드는 여기...