Props [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 [예습] React State & Props 이해 React 기초 수업이 시작한지 2일이 지나간다. 처음 여유로웟던 2주와 다르게 하루하루가 어제 밀린 과제 목록을 복습하고, 뒤늦은 시간에야 다음날에 학습할 수업을 예습하고자 첫 장을 편다. 회사 다닐 때 느끼지 못했던 쫒기는 기분.. 대학교 시험기간에도 느끼지 못했던 두려움이다. 그 덕분에 나는 인생에 있어서 가장 의자에 오래 앉아 있는 시간을 보내고 있다. 그리고 오늘도 내일의 수업을 미... 블록체인Props예습코드스테이츠ReactStateBEB 04기BEB 04기 코드캠프 6일차 실무적인 폴더구조(Container/Presenter) 컴포넌트분리 및 데이터전달(Props) 둘다 값이 비어있음을 나타낸다. null은 개발자가 일부러 해당 부분을 비웠음을 의미하는 암묵적 룰로 사용되며 폴더구조 체계화 여러 사람들이 사용할 경우 필요한 부분을 찾기 힘들고 읽기가 힘들어진다. 그렇게 때문에 폴더구조를 바꿔주어 이를 해결한다. 컴포넌트분리 및 데이터전달 Container/Pr... setStatePropscontainer/presenter코드캠프폴더구조Props [복습] React State, props 활용한 과제 이번 과제는 npm으로 진행되었으므로 과제를 진행 하기 전, npm install 명령어를 터미널에 입력하여 npm 설치를 진행하였다. 이전에 spa부분을 예습하면서 정리했던 내용에 포함되어있는 router 관련 컴포넌트들을 사용하기 위해 과제를 시작하기 전, npm i react-router-dom 명령어를 터미널에 입력하여 설치를 진행하였다. 아래 그림과 같은 좌측 사이드 부분에 아이콘 ... 블록체인복습Props코드스테이츠ReactStateBEB 04기BEB 04기 두디어 찾아온 두번째 주 ! 폴더 구조가 왜 중요한데 ? props는 뭐야 ?container,presenter에 왜 쪼개는건데 !!! (Code Camp FE 6기) 얘는 참이면 뒤를 그려줘 ! -이 두개의 파일을 어떻게 합칠까? - props, export - 리액트의 단방향 데이터 흐름 props : 부모 컴포넌트가 자식컴포넌트에게 불려주는 변수/함수 - 컴포넌트 사용을 위한 폴더구조 ! commons 폴더(여러 군데에서 쓰이는 함수/기능들) , components 폴더 (한 번 쓰는애들) -import, export 잘 작성해줄것 ! -useStat... containerthisBinding실행 컨텍스트스택PropsexportimportVariablesEnvironment큐Presenter호이스팅Presenter [Project-심플다이어리] 리스트 렌더/추가/수정/삭제 => 기존 data에 새 데이터를 합치거나 삭제 데이터를 빼준 데이터를 새로운 변수에 담아서 setData를 통해 다시 셋팅(업데이트)함 초기값 data = [item1] <DiaryEditor props={setData}/> setData를 전달하여 DiaryEditor에서 새로운 일기 작성을 하면 App컴포넌트의 data에 추가가 된다. => data = [item1, item2] 추가된... useReffiltertogglePropsReactStateProps 자동 props 수동props눈 변수 앞에 props.변수라고 써줘야하지만, 자동 props sms 모든 자식태그가 props.children이 된다. 자동으로 props가 붙는다. app.tsx 이때, Component가 props.children이 된다. - 변경가능한 body부분 이것을 이용해 게시판 Layout(고정된 UI)을 만든다. 프로젝트 폴더 내 어떤 페이지를 들어가도 이 레이아웃이 적용된다.... PropslayoutProps React-Native [5. React의 필수 개념 : 컴포넌트, 속성, 상태, useEffect] 화면의 조각조각. 작은 컴포넌트들이 하나의 큰 컴포넌트를 구성한다. 컴포넌트에 데이터를 전달하는 기능! 규칙 1. Key & Value (content={content}) 형태로 전달 2. 컴포넌트 반복문 실행시, map에서 나오는 인덱스(i)를 key = {i} 속성 전달 형태로 꼭 넣을것! 컴포넌트에서 보유/관리되는 데이터! UI는 컴포넌트의 상태에 따라 다르게 표현된다. 따라서 리액트는... componentPropsuseEffectReactStateProps styled-components attrs()에 대하여 프로젝트에서 .attrs()을 사용하는 것을 보았는데 이름에서 대충 attributes를 받아다 쓰는 건가보다 싶었다 그래서 좀 더 구체적인 사용법을 알아보기로 하였다 ⚠ 회사에서 모르는 내용이나 미흡한 부분을 보완하기 위해 시작한 블로그이므로 styled-components 자체에 대한 설명은 생략합니다 attrs()패턴과 굉장히 유사하기 때문에 나도 처음 코드를 봤을 때 두 개의 차이를 ... Propsattrsstyled componentsattributepaasing props directlyProps [React] Hook, Props, State React 공식 문서에서 Hook을 다음과 같이 정의한다. Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)" 할 수 있게 해주는 함수입니다. 정의에서 알 수 있듯이 class 컴포넌트가 아닌 함수 컴포넌트에서만 동작한다. Hook(갈고리, 걸다)와 같은 단어 뜻 그대로 컴포넌트 밖의 어떠한 기능, 로직 등을 걸... JavaScriptPropsReactjsJavaScript State Lifting React는 데이터의 흐름이 양방향이 아니라 단방향이다. 한 컴포넌트에서 사용하고 있는 것을 부모컴포넌트 또는 형제컴포넌트에서는 사용할 수 없다. 그렇기 때문에 두 형제컴포넌트에서 같이 사용하고 싶은 기능이 있다면 그 부모 컴포넌트에 코드를 작성하고 props를 이용해 각 자식컴포넌트에서 사용해야 한다. 자식2에서는 부모에 있는 1씩 올라가는 기능을 그대로 가져와 사용했고(props 이용) ... useStatereact jsPropsState LiftingProps [React] React 기본 - map/props 1 javascript의 함수 배열의 요소를 모두 순환하면서 return 받은 값을 통해 새로운 배열을 생성하는 함수. 위 배열의 내용 중 name을 props로 넘겨준 후, name을 이용하여 웹사이트에 출력하는 logic을 만들어보자. props를 넘겨줄때 유의하면서 logic을 구현하도록 한다. 해당 API나 배열함수(foodList)에 대한 map함수를 사용하기위해 {}(중괄호)로 바로 ... ReactPropsMapMap 비구조화 할당(destructing assignment) ES6의 비구조화 할당문법을 사용해, 내부값을 바로 추출하는 방법. props 값을 조회 할 때마다, props.[변수].. 이런식으로 키워드를 앞에 붙여주는 방식보다 편리하게 값조회가 가능함. 함수의 파라미터가 객체라면 그 값을 비구조화해서 사용. 구조 분해 문법 이라고도 함. 함수의 파라미터 부분에서도 사용가능. > props에서 직접 추출 > 비구조화 할당방식... ReactjsPropsES6ES6 4장. React Props 사용 📌 Props란? 컴포넌트 끼리 값을 전달하는 수단 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용한다. (하위 컴포넌트가 상위 컴포넌트의 값을 바로 참조할 수 없다는 의미를 뜻함) 객체, 배열 등 유형과 상관없이 모든 것이 전달 가능 💡 defaultProps 실수로 Props 를 빼먹은 경우, 특정 상황에 Props 를 일부러 비워야 할 경우를 대비해 설정 설정 방법-1 (최신... ReactdefaultPropsPropsstudyProps props 사용법 props 는 속성 이라고 볼 수 있다. 버튼 2개에 같은 스타일을 주고싶은데, 이렇게 하면, 굳이 같은 스타일을 중복해서 2번 사용해야 한다. 저 속성들을 따로 담아주고 그것을 재사용하는것이 바람직해보인다. 그래서 아예 Btn 이라는 컴포넌트를 만들어주고, <Btn/>컴포넌트 2개를 App 컴포넌트 안에 넣어준다. 하지만 버튼마다 텍스트를 각자 다르게 작성, 변경 등을 하고 싶다. <img... Props리액트Props TIL27)react (state,props,event ) react 를 사용하기 위해 먼저 import를 사용합니다. 위 코드와 아래 코드 뜻은 같습니다. 요즘은 아래 처럼 써도 기능합니다. jsx에서 스타일을 줄때 객체 형태로 인라인 스타일을 줘야 합니다. 카멜케이스로 사용하며 자바스크립트 문법을 넣을때는 {}를 사용하여 감싸줘야 합니다. 스타일(style)은 객체형태로 써야 하기 때문에 {{}} 두개가 사용됩니다. 화살표 함수 말고 일반 함수를... State리액트인라인스타일import여러가지사용법PropsProps TIL DAY.27 Props, and State 복습 오늘은 1차 프로젝트를 진행하면서 이해하기 제일 어려웠던 props 와 state 를 복습하는 시간을 갖도록 하겠습니다. 컴포넌트 내부의 immutable Data JSX 내부에 {this.props.propsName} 컴포넌트를 사용할 때, <> 괄호 안에 propsName = "value" this.props.children 은 기본적으로 갖고있는 props으로서 , <CPnt 여기에 있... StatePropsProps
[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 [예습] React State & Props 이해 React 기초 수업이 시작한지 2일이 지나간다. 처음 여유로웟던 2주와 다르게 하루하루가 어제 밀린 과제 목록을 복습하고, 뒤늦은 시간에야 다음날에 학습할 수업을 예습하고자 첫 장을 편다. 회사 다닐 때 느끼지 못했던 쫒기는 기분.. 대학교 시험기간에도 느끼지 못했던 두려움이다. 그 덕분에 나는 인생에 있어서 가장 의자에 오래 앉아 있는 시간을 보내고 있다. 그리고 오늘도 내일의 수업을 미... 블록체인Props예습코드스테이츠ReactStateBEB 04기BEB 04기 코드캠프 6일차 실무적인 폴더구조(Container/Presenter) 컴포넌트분리 및 데이터전달(Props) 둘다 값이 비어있음을 나타낸다. null은 개발자가 일부러 해당 부분을 비웠음을 의미하는 암묵적 룰로 사용되며 폴더구조 체계화 여러 사람들이 사용할 경우 필요한 부분을 찾기 힘들고 읽기가 힘들어진다. 그렇게 때문에 폴더구조를 바꿔주어 이를 해결한다. 컴포넌트분리 및 데이터전달 Container/Pr... setStatePropscontainer/presenter코드캠프폴더구조Props [복습] React State, props 활용한 과제 이번 과제는 npm으로 진행되었으므로 과제를 진행 하기 전, npm install 명령어를 터미널에 입력하여 npm 설치를 진행하였다. 이전에 spa부분을 예습하면서 정리했던 내용에 포함되어있는 router 관련 컴포넌트들을 사용하기 위해 과제를 시작하기 전, npm i react-router-dom 명령어를 터미널에 입력하여 설치를 진행하였다. 아래 그림과 같은 좌측 사이드 부분에 아이콘 ... 블록체인복습Props코드스테이츠ReactStateBEB 04기BEB 04기 두디어 찾아온 두번째 주 ! 폴더 구조가 왜 중요한데 ? props는 뭐야 ?container,presenter에 왜 쪼개는건데 !!! (Code Camp FE 6기) 얘는 참이면 뒤를 그려줘 ! -이 두개의 파일을 어떻게 합칠까? - props, export - 리액트의 단방향 데이터 흐름 props : 부모 컴포넌트가 자식컴포넌트에게 불려주는 변수/함수 - 컴포넌트 사용을 위한 폴더구조 ! commons 폴더(여러 군데에서 쓰이는 함수/기능들) , components 폴더 (한 번 쓰는애들) -import, export 잘 작성해줄것 ! -useStat... containerthisBinding실행 컨텍스트스택PropsexportimportVariablesEnvironment큐Presenter호이스팅Presenter [Project-심플다이어리] 리스트 렌더/추가/수정/삭제 => 기존 data에 새 데이터를 합치거나 삭제 데이터를 빼준 데이터를 새로운 변수에 담아서 setData를 통해 다시 셋팅(업데이트)함 초기값 data = [item1] <DiaryEditor props={setData}/> setData를 전달하여 DiaryEditor에서 새로운 일기 작성을 하면 App컴포넌트의 data에 추가가 된다. => data = [item1, item2] 추가된... useReffiltertogglePropsReactStateProps 자동 props 수동props눈 변수 앞에 props.변수라고 써줘야하지만, 자동 props sms 모든 자식태그가 props.children이 된다. 자동으로 props가 붙는다. app.tsx 이때, Component가 props.children이 된다. - 변경가능한 body부분 이것을 이용해 게시판 Layout(고정된 UI)을 만든다. 프로젝트 폴더 내 어떤 페이지를 들어가도 이 레이아웃이 적용된다.... PropslayoutProps React-Native [5. React의 필수 개념 : 컴포넌트, 속성, 상태, useEffect] 화면의 조각조각. 작은 컴포넌트들이 하나의 큰 컴포넌트를 구성한다. 컴포넌트에 데이터를 전달하는 기능! 규칙 1. Key & Value (content={content}) 형태로 전달 2. 컴포넌트 반복문 실행시, map에서 나오는 인덱스(i)를 key = {i} 속성 전달 형태로 꼭 넣을것! 컴포넌트에서 보유/관리되는 데이터! UI는 컴포넌트의 상태에 따라 다르게 표현된다. 따라서 리액트는... componentPropsuseEffectReactStateProps styled-components attrs()에 대하여 프로젝트에서 .attrs()을 사용하는 것을 보았는데 이름에서 대충 attributes를 받아다 쓰는 건가보다 싶었다 그래서 좀 더 구체적인 사용법을 알아보기로 하였다 ⚠ 회사에서 모르는 내용이나 미흡한 부분을 보완하기 위해 시작한 블로그이므로 styled-components 자체에 대한 설명은 생략합니다 attrs()패턴과 굉장히 유사하기 때문에 나도 처음 코드를 봤을 때 두 개의 차이를 ... Propsattrsstyled componentsattributepaasing props directlyProps [React] Hook, Props, State React 공식 문서에서 Hook을 다음과 같이 정의한다. Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)" 할 수 있게 해주는 함수입니다. 정의에서 알 수 있듯이 class 컴포넌트가 아닌 함수 컴포넌트에서만 동작한다. Hook(갈고리, 걸다)와 같은 단어 뜻 그대로 컴포넌트 밖의 어떠한 기능, 로직 등을 걸... JavaScriptPropsReactjsJavaScript State Lifting React는 데이터의 흐름이 양방향이 아니라 단방향이다. 한 컴포넌트에서 사용하고 있는 것을 부모컴포넌트 또는 형제컴포넌트에서는 사용할 수 없다. 그렇기 때문에 두 형제컴포넌트에서 같이 사용하고 싶은 기능이 있다면 그 부모 컴포넌트에 코드를 작성하고 props를 이용해 각 자식컴포넌트에서 사용해야 한다. 자식2에서는 부모에 있는 1씩 올라가는 기능을 그대로 가져와 사용했고(props 이용) ... useStatereact jsPropsState LiftingProps [React] React 기본 - map/props 1 javascript의 함수 배열의 요소를 모두 순환하면서 return 받은 값을 통해 새로운 배열을 생성하는 함수. 위 배열의 내용 중 name을 props로 넘겨준 후, name을 이용하여 웹사이트에 출력하는 logic을 만들어보자. props를 넘겨줄때 유의하면서 logic을 구현하도록 한다. 해당 API나 배열함수(foodList)에 대한 map함수를 사용하기위해 {}(중괄호)로 바로 ... ReactPropsMapMap 비구조화 할당(destructing assignment) ES6의 비구조화 할당문법을 사용해, 내부값을 바로 추출하는 방법. props 값을 조회 할 때마다, props.[변수].. 이런식으로 키워드를 앞에 붙여주는 방식보다 편리하게 값조회가 가능함. 함수의 파라미터가 객체라면 그 값을 비구조화해서 사용. 구조 분해 문법 이라고도 함. 함수의 파라미터 부분에서도 사용가능. > props에서 직접 추출 > 비구조화 할당방식... ReactjsPropsES6ES6 4장. React Props 사용 📌 Props란? 컴포넌트 끼리 값을 전달하는 수단 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용한다. (하위 컴포넌트가 상위 컴포넌트의 값을 바로 참조할 수 없다는 의미를 뜻함) 객체, 배열 등 유형과 상관없이 모든 것이 전달 가능 💡 defaultProps 실수로 Props 를 빼먹은 경우, 특정 상황에 Props 를 일부러 비워야 할 경우를 대비해 설정 설정 방법-1 (최신... ReactdefaultPropsPropsstudyProps props 사용법 props 는 속성 이라고 볼 수 있다. 버튼 2개에 같은 스타일을 주고싶은데, 이렇게 하면, 굳이 같은 스타일을 중복해서 2번 사용해야 한다. 저 속성들을 따로 담아주고 그것을 재사용하는것이 바람직해보인다. 그래서 아예 Btn 이라는 컴포넌트를 만들어주고, <Btn/>컴포넌트 2개를 App 컴포넌트 안에 넣어준다. 하지만 버튼마다 텍스트를 각자 다르게 작성, 변경 등을 하고 싶다. <img... Props리액트Props TIL27)react (state,props,event ) react 를 사용하기 위해 먼저 import를 사용합니다. 위 코드와 아래 코드 뜻은 같습니다. 요즘은 아래 처럼 써도 기능합니다. jsx에서 스타일을 줄때 객체 형태로 인라인 스타일을 줘야 합니다. 카멜케이스로 사용하며 자바스크립트 문법을 넣을때는 {}를 사용하여 감싸줘야 합니다. 스타일(style)은 객체형태로 써야 하기 때문에 {{}} 두개가 사용됩니다. 화살표 함수 말고 일반 함수를... State리액트인라인스타일import여러가지사용법PropsProps TIL DAY.27 Props, and State 복습 오늘은 1차 프로젝트를 진행하면서 이해하기 제일 어려웠던 props 와 state 를 복습하는 시간을 갖도록 하겠습니다. 컴포넌트 내부의 immutable Data JSX 내부에 {this.props.propsName} 컴포넌트를 사용할 때, <> 괄호 안에 propsName = "value" this.props.children 은 기본적으로 갖고있는 props으로서 , <CPnt 여기에 있... StatePropsProps