State React 상태 관리 (Redux, Mobx, Recoil) React 에서의 데이터 흐름은 단방향이기 때문에, 컴포넌트가 관리하는 데이터를 부모 컴포넌트에서 자식 컴포넌트에게 전달하는 것은 가능하지만, 자식 컴포넌트 => 부모 컴포넌트 또는 자식 컴포넌트 => 자식 컴포넌트 방식으로 전달하는 것은 불가능하다. 위와 같은 장점으로 인해 props drilling을 회피할 수 있고 더 깔끔한 코드를 작성할 수 있지만, React context에는 렌더링... ReactStateReact [Udemy] React 기본 - 일기장 만들기(1) ☑️ DiaryEditor : 일기장 컴포넌트 ☑️ useState : 요소를 리액트가 직접 핸들링할 수 있도록 만들어야 함 ☑️ 상태변화 함수 : input과 textarea가 받는 value prop으로 전달 값이 실시간으로 바뀌도록 이벤트 설정(콜백함수 등록하여 event 객체인 e를 매개변수로 전달받게 됨) 사용자가 입력을 하면 어떤 사건이 발생했다고 인식하는데 onChange는 값이... onchangeStateprojectuseState유데미udemy한입크기로잘라먹는리액트리액트State [Udemy] React - CRA, JSX, State, Props ☑️ node_modules : 많은 모듈 패키지 설치, node_modules가 없거나 지워져도 package.json이나 package-lock.json 또는 npm i로 다시 설치할 수 있음. ☑️ 컴포넌트 방식 : JSX 문법을 사용해서 웹에 필요한 요소를 함수에 담아서 리턴 후 내보내서 index.js같은 다른 파일에서도 사용할 수 있게 함 ☑️ ESModule System : Co... JSXState유데미udemy한입크기로잘라먹는리액트ReactPropsCRA리액트CRA 16) React의 전적들... 실무가고싶으면 class형태의 component도 알아야 해 ! useEffect와 axios까지! 실무중심주의 코드캠프의 커리큘럼 체고야!!!! (Code Camp FE 6기) 스프레드 연산자를 잘 활용하면 코드를 간략하고 한 눈에 보기쉽게 리팩토링 할 수 있으니 포트폴리오에도 적용해보시길 바랍니다! state, props, refs, 컴포넌트 메서드와 생명주기 메서드를 this로 참조할 수 있었습니다. 이렇게 컴포넌트 생명주기를 함수형 컴포넌트에서 그려주기 위해서 저희는 useEffect를 사용해서 그려주었습니다. 오늘 새로 배운 react-Hook 두 가지 us... 컴포넌트생명주기updateboardidclassuseEffect내장객체OOP의존성배열렉시컬디스inputcomponentdidupdate스프레드연산자componentWillUnmount()extends componentClass ComponentcomponentDidMountcomponent-lifecycleState객체지향프로그래밍dependency arraythisClass Component [예습] React State & Props 이해 React 기초 수업이 시작한지 2일이 지나간다. 처음 여유로웟던 2주와 다르게 하루하루가 어제 밀린 과제 목록을 복습하고, 뒤늦은 시간에야 다음날에 학습할 수업을 예습하고자 첫 장을 편다. 회사 다닐 때 느끼지 못했던 쫒기는 기분.. 대학교 시험기간에도 느끼지 못했던 두려움이다. 그 덕분에 나는 인생에 있어서 가장 의자에 오래 앉아 있는 시간을 보내고 있다. 그리고 오늘도 내일의 수업을 미... 블록체인Props예습코드스테이츠ReactStateBEB 04기BEB 04기 [복습] React State, props 활용한 과제 이번 과제는 npm으로 진행되었으므로 과제를 진행 하기 전, npm install 명령어를 터미널에 입력하여 npm 설치를 진행하였다. 이전에 spa부분을 예습하면서 정리했던 내용에 포함되어있는 router 관련 컴포넌트들을 사용하기 위해 과제를 시작하기 전, npm i react-router-dom 명령어를 터미널에 입력하여 설치를 진행하였다. 아래 그림과 같은 좌측 사이드 부분에 아이콘 ... 블록체인복습Props코드스테이츠ReactStateBEB 04기BEB 04기 [iOS] SwiftUI - @State, @Binding UIKit 을 사용했을 때는 어떠한 변수에 변화가 생기면 해당 변화를 직접 관찰하고 반영 해 주어야 했는데 SwiftUI 에서는 property wrapper 를 활용해 이러한 작업을 자동화 할 수 있도록 했다. 변화가 생기면 해당 변수의 값을 읽거나 새로 쓸 수 있음을 의미하는 property wrapper SwiftUI 는 state 로 선언된 property 들의 저장소를 관리 Stat... iOSStateswiftuibindingState [Project-심플다이어리] 리스트 렌더/추가/수정/삭제 => 기존 data에 새 데이터를 합치거나 삭제 데이터를 빼준 데이터를 새로운 변수에 담아서 setData를 통해 다시 셋팅(업데이트)함 초기값 data = [item1] <DiaryEditor props={setData}/> setData를 전달하여 DiaryEditor에서 새로운 일기 작성을 하면 App컴포넌트의 data에 추가가 된다. => data = [item1, item2] 추가된... useReffiltertogglePropsReactStateProps [Project-심플다이어리] 글 작성하기 React로 심플다이어리 만들기를 통해 배우기 :) 알게된 것 타겟의 value를 가져오는 비슷한 구조일때는 state를 따로 나눠쓰지 않아도 객체를 활용해서 사용할 수 있다. 이벤트핸들러도 한개로 활용할 수 있다. 다시 입력을 원할 때 focus주는 방식의 useRef 사용법 🔽 state를 객체로 합쳐 사용하기 onChange의 콜백함수는 매개변수 e(event)를 가져옴 => e.tar... eventhandleruseRefReactStateprojectReact React-Native [5. React의 필수 개념 : 컴포넌트, 속성, 상태, useEffect] 화면의 조각조각. 작은 컴포넌트들이 하나의 큰 컴포넌트를 구성한다. 컴포넌트에 데이터를 전달하는 기능! 규칙 1. Key & Value (content={content}) 형태로 전달 2. 컴포넌트 반복문 실행시, map에서 나오는 인덱스(i)를 key = {i} 속성 전달 형태로 꼭 넣을것! 컴포넌트에서 보유/관리되는 데이터! UI는 컴포넌트의 상태에 따라 다르게 표현된다. 따라서 리액트는... componentPropsuseEffectReactStateProps React의 전적들... 실무가고싶으면 class형태의 component도 알아야 해 ! useEffect와 axios까지! (Code Camp FE 6기) 근데 두번째 문제는 코드가 많이 길어따.. 이번주 수업은 백엔드를 이해하고 있는 프론트 개발자로 성장하기 위해 ! 글 수정을 위해서 댓글 작성부분을 컴포넌트로 빼서 조건을 걸어줘서 보여주기, 안보여주기 식으로 ! 위에서 이어지는 부분을 밑에서 바꿔주면 이렇게 된다 이렇게 있어도 상관이 없어 ! 그럼 이렇게 바꾸고나서 또 보니, 3개의 함수를 또 하나로 묶어줄수 있을텐데..! 이렇게 쓰고자하는... 렉시컬디스componentdidupdate내장객체Class ComponentupdateboardiduseEffect의존성배열OOPdependency arraycomponent-lifecycleextends componentcomponentWillUnmount()inputcomponentDidMount스프레드연산자State객체지향프로그래밍thisclass컴포넌트생명주기Class Component ⛏ state 선언 위치에 따른 rendering 차이 너무도 당연한 얘기를 실험과 함께 정리해보고자 한다. 솔직히 React를 쓰면서, 'state가 바뀌면, re-rendering이 됩니다!' 정도만 알고 코딩했던 것 같다. 'rendering이 적게 일어나게 하려면 state를 어떤 식으로 나눠야 할까?', 'state를 어떻게 두면 rendering이 많이 일어날까?' 여러 경우를 비교하는게 딱히 어려운 일도 아닌데, 자꾸 미뤄온 스스로를... ReactStaterenderingReact 리액트 처음부터 다시하기.5 이때까지 state 에 저장된값에 따라 component의 상태를 바꾸거나, props를 통해 자식 component에게 state값을 전달하는 방식을 알아보았다.. 이번엔 특정조건에 맞춰 state값이 변경되면 결과물이 바뀌는 과정을 알아보자. 이번엔 새롭게 추가한 mode와 welcome state를 추가했다. 다음 이미지를 보기전 중요한 사실!! State 가 변경되면 reender 함... ReactState조건문EventEvent [React] 중요한 데이터는 리액트 state로 만들죠 데이터는 1. 변수에 넣거나 2. state에 넣거나 => Vue.js에서 data와 비슷한듯? 리액트의 데이터 저장공간인 state 만드는 법 1. { useState } 상단에 첨부 2. useState(데이터) => 이건 엄밀히 따지면 다르긴 한거 같긴한데 Vue.js에서 mapState랑 비슷한 개념인듯? 를 쓰면 [a, b] 어레이가 남고 데이터 두개가 들어있다. a는 앞에 들어간 ... ReactStateReact [React] React 기본 - State 실무에 적용하기엔 다소 무리가 있지만, 정확한 이해를 바탕으로 적용할 수 있도록 꼭 기억하고 알아두도록 하자. React 내부에서 동작하는 모든 동적 데이터, 혹은 동적 상태를 일컫는 개념이다. 변경되는 데이터 상태변경의 개념은 데이터를 변화하는게 아니라, 데이터를 state로 취한 후에 새로운 객체(state)를 반환하여 새로운 데이터의 "상태"를 얻는 개념이다. State를 활용하기위해선... ReactStateReact
React 상태 관리 (Redux, Mobx, Recoil) React 에서의 데이터 흐름은 단방향이기 때문에, 컴포넌트가 관리하는 데이터를 부모 컴포넌트에서 자식 컴포넌트에게 전달하는 것은 가능하지만, 자식 컴포넌트 => 부모 컴포넌트 또는 자식 컴포넌트 => 자식 컴포넌트 방식으로 전달하는 것은 불가능하다. 위와 같은 장점으로 인해 props drilling을 회피할 수 있고 더 깔끔한 코드를 작성할 수 있지만, React context에는 렌더링... ReactStateReact [Udemy] React 기본 - 일기장 만들기(1) ☑️ DiaryEditor : 일기장 컴포넌트 ☑️ useState : 요소를 리액트가 직접 핸들링할 수 있도록 만들어야 함 ☑️ 상태변화 함수 : input과 textarea가 받는 value prop으로 전달 값이 실시간으로 바뀌도록 이벤트 설정(콜백함수 등록하여 event 객체인 e를 매개변수로 전달받게 됨) 사용자가 입력을 하면 어떤 사건이 발생했다고 인식하는데 onChange는 값이... onchangeStateprojectuseState유데미udemy한입크기로잘라먹는리액트리액트State [Udemy] React - CRA, JSX, State, Props ☑️ node_modules : 많은 모듈 패키지 설치, node_modules가 없거나 지워져도 package.json이나 package-lock.json 또는 npm i로 다시 설치할 수 있음. ☑️ 컴포넌트 방식 : JSX 문법을 사용해서 웹에 필요한 요소를 함수에 담아서 리턴 후 내보내서 index.js같은 다른 파일에서도 사용할 수 있게 함 ☑️ ESModule System : Co... JSXState유데미udemy한입크기로잘라먹는리액트ReactPropsCRA리액트CRA 16) React의 전적들... 실무가고싶으면 class형태의 component도 알아야 해 ! useEffect와 axios까지! 실무중심주의 코드캠프의 커리큘럼 체고야!!!! (Code Camp FE 6기) 스프레드 연산자를 잘 활용하면 코드를 간략하고 한 눈에 보기쉽게 리팩토링 할 수 있으니 포트폴리오에도 적용해보시길 바랍니다! state, props, refs, 컴포넌트 메서드와 생명주기 메서드를 this로 참조할 수 있었습니다. 이렇게 컴포넌트 생명주기를 함수형 컴포넌트에서 그려주기 위해서 저희는 useEffect를 사용해서 그려주었습니다. 오늘 새로 배운 react-Hook 두 가지 us... 컴포넌트생명주기updateboardidclassuseEffect내장객체OOP의존성배열렉시컬디스inputcomponentdidupdate스프레드연산자componentWillUnmount()extends componentClass ComponentcomponentDidMountcomponent-lifecycleState객체지향프로그래밍dependency arraythisClass Component [예습] React State & Props 이해 React 기초 수업이 시작한지 2일이 지나간다. 처음 여유로웟던 2주와 다르게 하루하루가 어제 밀린 과제 목록을 복습하고, 뒤늦은 시간에야 다음날에 학습할 수업을 예습하고자 첫 장을 편다. 회사 다닐 때 느끼지 못했던 쫒기는 기분.. 대학교 시험기간에도 느끼지 못했던 두려움이다. 그 덕분에 나는 인생에 있어서 가장 의자에 오래 앉아 있는 시간을 보내고 있다. 그리고 오늘도 내일의 수업을 미... 블록체인Props예습코드스테이츠ReactStateBEB 04기BEB 04기 [복습] React State, props 활용한 과제 이번 과제는 npm으로 진행되었으므로 과제를 진행 하기 전, npm install 명령어를 터미널에 입력하여 npm 설치를 진행하였다. 이전에 spa부분을 예습하면서 정리했던 내용에 포함되어있는 router 관련 컴포넌트들을 사용하기 위해 과제를 시작하기 전, npm i react-router-dom 명령어를 터미널에 입력하여 설치를 진행하였다. 아래 그림과 같은 좌측 사이드 부분에 아이콘 ... 블록체인복습Props코드스테이츠ReactStateBEB 04기BEB 04기 [iOS] SwiftUI - @State, @Binding UIKit 을 사용했을 때는 어떠한 변수에 변화가 생기면 해당 변화를 직접 관찰하고 반영 해 주어야 했는데 SwiftUI 에서는 property wrapper 를 활용해 이러한 작업을 자동화 할 수 있도록 했다. 변화가 생기면 해당 변수의 값을 읽거나 새로 쓸 수 있음을 의미하는 property wrapper SwiftUI 는 state 로 선언된 property 들의 저장소를 관리 Stat... iOSStateswiftuibindingState [Project-심플다이어리] 리스트 렌더/추가/수정/삭제 => 기존 data에 새 데이터를 합치거나 삭제 데이터를 빼준 데이터를 새로운 변수에 담아서 setData를 통해 다시 셋팅(업데이트)함 초기값 data = [item1] <DiaryEditor props={setData}/> setData를 전달하여 DiaryEditor에서 새로운 일기 작성을 하면 App컴포넌트의 data에 추가가 된다. => data = [item1, item2] 추가된... useReffiltertogglePropsReactStateProps [Project-심플다이어리] 글 작성하기 React로 심플다이어리 만들기를 통해 배우기 :) 알게된 것 타겟의 value를 가져오는 비슷한 구조일때는 state를 따로 나눠쓰지 않아도 객체를 활용해서 사용할 수 있다. 이벤트핸들러도 한개로 활용할 수 있다. 다시 입력을 원할 때 focus주는 방식의 useRef 사용법 🔽 state를 객체로 합쳐 사용하기 onChange의 콜백함수는 매개변수 e(event)를 가져옴 => e.tar... eventhandleruseRefReactStateprojectReact React-Native [5. React의 필수 개념 : 컴포넌트, 속성, 상태, useEffect] 화면의 조각조각. 작은 컴포넌트들이 하나의 큰 컴포넌트를 구성한다. 컴포넌트에 데이터를 전달하는 기능! 규칙 1. Key & Value (content={content}) 형태로 전달 2. 컴포넌트 반복문 실행시, map에서 나오는 인덱스(i)를 key = {i} 속성 전달 형태로 꼭 넣을것! 컴포넌트에서 보유/관리되는 데이터! UI는 컴포넌트의 상태에 따라 다르게 표현된다. 따라서 리액트는... componentPropsuseEffectReactStateProps React의 전적들... 실무가고싶으면 class형태의 component도 알아야 해 ! useEffect와 axios까지! (Code Camp FE 6기) 근데 두번째 문제는 코드가 많이 길어따.. 이번주 수업은 백엔드를 이해하고 있는 프론트 개발자로 성장하기 위해 ! 글 수정을 위해서 댓글 작성부분을 컴포넌트로 빼서 조건을 걸어줘서 보여주기, 안보여주기 식으로 ! 위에서 이어지는 부분을 밑에서 바꿔주면 이렇게 된다 이렇게 있어도 상관이 없어 ! 그럼 이렇게 바꾸고나서 또 보니, 3개의 함수를 또 하나로 묶어줄수 있을텐데..! 이렇게 쓰고자하는... 렉시컬디스componentdidupdate내장객체Class ComponentupdateboardiduseEffect의존성배열OOPdependency arraycomponent-lifecycleextends componentcomponentWillUnmount()inputcomponentDidMount스프레드연산자State객체지향프로그래밍thisclass컴포넌트생명주기Class Component ⛏ state 선언 위치에 따른 rendering 차이 너무도 당연한 얘기를 실험과 함께 정리해보고자 한다. 솔직히 React를 쓰면서, 'state가 바뀌면, re-rendering이 됩니다!' 정도만 알고 코딩했던 것 같다. 'rendering이 적게 일어나게 하려면 state를 어떤 식으로 나눠야 할까?', 'state를 어떻게 두면 rendering이 많이 일어날까?' 여러 경우를 비교하는게 딱히 어려운 일도 아닌데, 자꾸 미뤄온 스스로를... ReactStaterenderingReact 리액트 처음부터 다시하기.5 이때까지 state 에 저장된값에 따라 component의 상태를 바꾸거나, props를 통해 자식 component에게 state값을 전달하는 방식을 알아보았다.. 이번엔 특정조건에 맞춰 state값이 변경되면 결과물이 바뀌는 과정을 알아보자. 이번엔 새롭게 추가한 mode와 welcome state를 추가했다. 다음 이미지를 보기전 중요한 사실!! State 가 변경되면 reender 함... ReactState조건문EventEvent [React] 중요한 데이터는 리액트 state로 만들죠 데이터는 1. 변수에 넣거나 2. state에 넣거나 => Vue.js에서 data와 비슷한듯? 리액트의 데이터 저장공간인 state 만드는 법 1. { useState } 상단에 첨부 2. useState(데이터) => 이건 엄밀히 따지면 다르긴 한거 같긴한데 Vue.js에서 mapState랑 비슷한 개념인듯? 를 쓰면 [a, b] 어레이가 남고 데이터 두개가 들어있다. a는 앞에 들어간 ... ReactStateReact [React] React 기본 - State 실무에 적용하기엔 다소 무리가 있지만, 정확한 이해를 바탕으로 적용할 수 있도록 꼭 기억하고 알아두도록 하자. React 내부에서 동작하는 모든 동적 데이터, 혹은 동적 상태를 일컫는 개념이다. 변경되는 데이터 상태변경의 개념은 데이터를 변화하는게 아니라, 데이터를 state로 취한 후에 새로운 객체(state)를 반환하여 새로운 데이터의 "상태"를 얻는 개념이다. State를 활용하기위해선... ReactStateReact