# State
[TIL 0328] State와 Prev
[실습 section13-04] state란 리액트 컴포넌트에서 데이터를 담기 위한 상자! 이 상자에 담긴 내용들은 함수가 모두 끝나게 되면 화면에 반영이 된다. 버그 실행은 잘되나 이상한 현상 버그의 유발 요인 이방법보다 좋은 방법 실행할때마다 임시저장공간에 만
[React] 6. React의 State
변경 가능한 값우리가 아는 데이터에 해당.데이터 변경 시 화면이 새로고침 됨state는 우리가 일반적으로 알고있는 변수와 비슷하다. 다음 예제에서는 카드색상을 원하는색으로 바꾸는 실습을 진행하겠다.아래와 같이 파일을 생성한다.Label, Squere컴포넌트를 사용하는
Learn State Lifting
react데이터의 흐름은 상위에서 하위로 전달하는 하향식, 단방향 데이터 흐름이다.장점은 기능 변경 사항에 대한 코드 수정이 적어지고 복잡하지 않아 코드의 흐름을 알기 쉽다. 그러나 단점 또한 존재한다.단방향 데이터 흐름의 경우, 위의 구조에서 자식1의 state를 자
State 및 배열 비구조화 할당
Hooks를 사용하기 전에 배열 비구조화 할당이라는 것을 알아야하는데, 배열 비구조화 할당은 객체 비구조화 할당과 비슷합니다.즉, 배열 안에 들어 있는 값을 쉽게 추출할 수 있도록 해주는 문법입니다.useState를 사용해보도록 하겠습니다. useState 사용방법을
2023. 3. 28
Index intro UI프레임워크,라이브러리(Ant-Design, Material-UI) 모달 State, Prev 캐러셀 이미지 (React-Slick) Intro "바퀴를 재발명 하지 마라" 이미 있는 기능을 구현하는데 시간을 쏟지 마라 => 시간절약, 버그 최
[React] Component, state, props
컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다.소프트웨어의 재사용을 어렵게 하고 유지보수 비용이 크게 증가하는 원인이 된다. 이러한 상황에서 소프트웨어의 재사용의 중요성과 필요성을 위해 나온 기술이 컴포넌트 기술이다.컴포넌
객체지향 디자인패턴 1~2
movie movie >Singleton 어떤 클래스의 객체가 해당 프로세스에서 딱 하나만 만들어져 있어야 할 때 사용 >Strategy 프로그램 실행 중 모드가 바뀔 때마다 해당 모듈에 맞는 시나리오가 이루어지는 방식 >State 특정 상태마다 다르게 할 일을, 나아가서 그 상태들 자체를 그 상태마다 실행시 할 일과 함께 하나하나 모듈화 해서 ...
[💻 코드스테이츠 FE 44기] ✨반딧불이반✨ React Twittler state-props 의사코드작성
코드스테이츠에 섹션2 부터 시작하는 반딧불이반이 있다.종합퀴즈나 과제 등을 평균 보다 낮을 경우 선정되는데..종합퀴즈 문제를 잘못 읽어 풀어서 이번 반딧불이반에 선정 됐다.과제는 오늘 진행한 React Twittler Intro 레퍼런스 의사코드 작성하는 것이다.JSX
[💻 코드스테이츠 FE 44기] state-props 과제
이전 학습시간에 배웠던 state, props, event를 활용해 푸는 과제를 진행했다.다른 부분은 생각 보다 쉬워서 금방 진행 되었는데Tweets.js에서 새로운 트윗 입력 후 버튼 클릭시 최상단으로 업로드 하는 영역이 어려웠다.✏️ 마치며
[React] 상태(state) 끌어올리기
상위 컴포넌트의 상태 변경 함수 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행하는 것이다. 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야할 필요가 있다. 이땐 가장 가까운 공통 조상(컴포넌트)에서 state를 끌어올리는 것을 권장한다.
React State & Props
컴포넌트의 속성(property)을 의미한다.상위 컴포넌트로부터 전달받은 값으로 변하지 않는 값이며 마치 함수의 전달인자처럼 사용할 수 있다.이때 props로 어떤 타입의 값도 넣어 전달할 수 있도록 객체의 형태를 가지고 있다.하위 컴포넌트에 전달하고자 하는 값과 속성
[💻 코드스테이츠 FE 44기] Props, State, Event
Props, State의 특징과 이를 활용한 이벤트 처리에 대해 학습했다.변하지 않는 외부로 부터 전달 받은 값부모 컴포넌트(상위 컴포넌트)로 부터 전달 받은 값props를 함수의 전달인자 처럼 전달 받아 이를 기반으로 화면에 어떻게 표시 되는지를 기술하는 React
(SEB_FE) Section2 Unit6 React State & Props
state, props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다.React 함수 컴포넌트(React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있다.React 컴포넌트(React Com
[error shooting] 상태 끌어 올리기
react에는 state를 사용하여 상태를 관리한다하지만 리덕스나 리코일이 아닌 일반적인 상태관리 상황에서는 부모에서 자식으로만(단방향으로만) 관리를 한다하지만 이런 상황이 생긴다해쉬태그를 firebase로 보내야 하는 상황,보내지긴 하지만 배열로된 해쉬태그들을 못 보
Learn React State & Props
props 컴포넌트를 2개로 나누면서 데이터와 기능의 연결고리가 끊어진다. 이를 연결하는것이 바로 props(부모 컴포넌트가 자식 컴포넌트에 물려주는 변수/함수) 함수를 공유하는 방법!!!// 자식이 부모에게 넘길 수는 없다.(단방향 관계) 부모 컴포넌트가 props
Reducer 와 Context 를 같이 써보자 - new 리액트 공식문서
reducer : state 업데이트 로직을 통합 context : 깊은 하위 컴포넌트에 정보 넘겨줌 둘을 같이 쓰면 무적의 state 관리자가 되겠지요? > ### 이 문서에서는 reducer와 context 같이 쓰기 props로 state 넘기고 dispatc
React의 데이터 다루는 방법
리액트에는 컴포넌트가 있고 컴포넌트에는 입력과 출력이 있다. 컴포넌트는 데이터(props)를 입력받아 View(state)상태에 따라 DOM Node를 출력하는 함수이다. 자신의 state를 자식 컴포넌트에 props로 전달할 수 있다. 💡 Props >부모 컴