State React 상태 관리 (Redux, Mobx, Recoil) React 에서의 데이터 흐름은 단방향이기 때문에, 컴포넌트가 관리하는 데이터를 부모 컴포넌트에서 자식 컴포넌트에게 전달하는 것은 가능하지만, 자식 컴포넌트 => 부모 컴포넌트 또는 자식 컴포넌트 => 자식 컴포넌트 방식으로 전달하는 것은 불가능하다. 위와 같은 장점으로 인해 props drilling을 회피할 수 있고 더 깔끔한 코드를 작성할 수 있지만, React context에는 렌더링... ReactStateReact [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기 [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 TIL_41_with Wecode 031 React state? 뜻 그대로 컴퍼넌트 내부에서 가지고 있는 컴퍼넌트의 상태값. 화면에 보여줄 컴퍼넌트의 UI 정보를 지니고 있는 객체. 클래스형 컴퍼넌트 안에는 필수적으로 render 함수가 필요하고 화면에 나타내고 싶은JSX 요소가 return 문 안에 들어가있다. render 함수 위의 constructor 함수는 state를 설정할 때 작성해줘야 하는 함수이다. 예시) state 객체 그래서... ReactStateWeCodeReact 리액트 처음부터 다시하기.5 이때까지 state 에 저장된값에 따라 component의 상태를 바꾸거나, props를 통해 자식 component에게 state값을 전달하는 방식을 알아보았다.. 이번엔 특정조건에 맞춰 state값이 변경되면 결과물이 바뀌는 과정을 알아보자. 이번엔 새롭게 추가한 mode와 welcome state를 추가했다. 다음 이미지를 보기전 중요한 사실!! State 가 변경되면 reender 함... ReactState조건문EventEvent TIL | 20 State & Event 1️⃣ 컴포넌트의 state는 객체(object) 이다. ➡️ 부모요소의 state 데이터를 자식 요소에서 반영시 킬 수 있다. 2️⃣ 객체 안의 key 이름은 원하는대로 설정 할 수 있다 (color 부분) 4️⃣ key (color) 의 value 값으로 red 지정 class 형 컴포넌트에서, <State /> 컴포넌트의 상태를 정의해보면 아래와 같다. 1️⃣ Class 형 <State... ReactStateReact [React] 중요한 데이터는 리액트 state로 만들죠 데이터는 1. 변수에 넣거나 2. state에 넣거나 => Vue.js에서 data와 비슷한듯? 리액트의 데이터 저장공간인 state 만드는 법 1. { useState } 상단에 첨부 2. useState(데이터) => 이건 엄밀히 따지면 다르긴 한거 같긴한데 Vue.js에서 mapState랑 비슷한 개념인듯? 를 쓰면 [a, b] 어레이가 남고 데이터 두개가 들어있다. a는 앞에 들어간 ... ReactStateReact TIL] React-state state는 render 함수가 실행되는 조건으로 component의 state는 props와 다르게 외부로 전달되지 않고 자신만의 고유한 state를 갖는다. ⁎ class 안에 state를 추가할 때는 render()와 구분하기 위한 ,를 사용하면 안된다. class는 객체가 아니기 때문이다. Class component에 state 추가하기 ⁎ super(props); 선언전에는 thi... ReactStateTILReact [React] States 상황에 따라 가변적인 정보와 UI가 연관될 수 있다. 이런 가변적인 정보를 상태라 부르고, 이 상태를 관리할 수 있는 방법이 바로 state이다. 사용자가 더하기, 빼기 버튼을 클릭할때마다 우리는 수량의 값을 변경시켜 UI에 반영하고 싶다. 이와 같은 상황에서 우리는 useState라는 함수를 이용해 수량을 가변적인 상태값으로 관리할 수 있다. useState를 적용해 초기 수량을 1로 표기... ReactState리엑트React React-Native [6. State와 filter를 사용한 데이터 관리] StatefilterReactReact
React 상태 관리 (Redux, Mobx, Recoil) React 에서의 데이터 흐름은 단방향이기 때문에, 컴포넌트가 관리하는 데이터를 부모 컴포넌트에서 자식 컴포넌트에게 전달하는 것은 가능하지만, 자식 컴포넌트 => 부모 컴포넌트 또는 자식 컴포넌트 => 자식 컴포넌트 방식으로 전달하는 것은 불가능하다. 위와 같은 장점으로 인해 props drilling을 회피할 수 있고 더 깔끔한 코드를 작성할 수 있지만, React context에는 렌더링... ReactStateReact [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기 [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 TIL_41_with Wecode 031 React state? 뜻 그대로 컴퍼넌트 내부에서 가지고 있는 컴퍼넌트의 상태값. 화면에 보여줄 컴퍼넌트의 UI 정보를 지니고 있는 객체. 클래스형 컴퍼넌트 안에는 필수적으로 render 함수가 필요하고 화면에 나타내고 싶은JSX 요소가 return 문 안에 들어가있다. render 함수 위의 constructor 함수는 state를 설정할 때 작성해줘야 하는 함수이다. 예시) state 객체 그래서... ReactStateWeCodeReact 리액트 처음부터 다시하기.5 이때까지 state 에 저장된값에 따라 component의 상태를 바꾸거나, props를 통해 자식 component에게 state값을 전달하는 방식을 알아보았다.. 이번엔 특정조건에 맞춰 state값이 변경되면 결과물이 바뀌는 과정을 알아보자. 이번엔 새롭게 추가한 mode와 welcome state를 추가했다. 다음 이미지를 보기전 중요한 사실!! State 가 변경되면 reender 함... ReactState조건문EventEvent TIL | 20 State & Event 1️⃣ 컴포넌트의 state는 객체(object) 이다. ➡️ 부모요소의 state 데이터를 자식 요소에서 반영시 킬 수 있다. 2️⃣ 객체 안의 key 이름은 원하는대로 설정 할 수 있다 (color 부분) 4️⃣ key (color) 의 value 값으로 red 지정 class 형 컴포넌트에서, <State /> 컴포넌트의 상태를 정의해보면 아래와 같다. 1️⃣ Class 형 <State... ReactStateReact [React] 중요한 데이터는 리액트 state로 만들죠 데이터는 1. 변수에 넣거나 2. state에 넣거나 => Vue.js에서 data와 비슷한듯? 리액트의 데이터 저장공간인 state 만드는 법 1. { useState } 상단에 첨부 2. useState(데이터) => 이건 엄밀히 따지면 다르긴 한거 같긴한데 Vue.js에서 mapState랑 비슷한 개념인듯? 를 쓰면 [a, b] 어레이가 남고 데이터 두개가 들어있다. a는 앞에 들어간 ... ReactStateReact TIL] React-state state는 render 함수가 실행되는 조건으로 component의 state는 props와 다르게 외부로 전달되지 않고 자신만의 고유한 state를 갖는다. ⁎ class 안에 state를 추가할 때는 render()와 구분하기 위한 ,를 사용하면 안된다. class는 객체가 아니기 때문이다. Class component에 state 추가하기 ⁎ super(props); 선언전에는 thi... ReactStateTILReact [React] States 상황에 따라 가변적인 정보와 UI가 연관될 수 있다. 이런 가변적인 정보를 상태라 부르고, 이 상태를 관리할 수 있는 방법이 바로 state이다. 사용자가 더하기, 빼기 버튼을 클릭할때마다 우리는 수량의 값을 변경시켜 UI에 반영하고 싶다. 이와 같은 상황에서 우리는 useState라는 함수를 이용해 수량을 가변적인 상태값으로 관리할 수 있다. useState를 적용해 초기 수량을 1로 표기... ReactState리엑트React React-Native [6. State와 filter를 사용한 데이터 관리] StatefilterReactReact