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기 [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] 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 TIL React #18 - 3.20 Component의 개념: Javascript를 통해서 사용하다보면 각 태그마다 엄청많은 양의 코드가 들어갈 수 있다. 협업을 한다고 하면 동료들에게 가독성이 떨어질 수 있고 개인에게도 나중에 원하는 코드를 찾고 싶을 때 찾기 힘들다. 그래서! Component, 즉 사용자에게 보여질 UI(화면)을 잘개 독립적인 형태로 쪼개어서 가독성이 뛰어나게 만든게 Component의 역할 즉, Comp... componentPropsProps [Vue vs React] Props Props의 개념을 이해해야 하는 이유는 Vue가 되었든 React가 되었든 단방향 데이터 흐름을 특징으로 하기 때문이다. 데이터를 한 방향으로만 흐르도록 설계했다는 이야기인데, 이유는 웹페이지의 구조가 결국은 상위 컴포넌트에서 하위 컴포넌트로 이어지는 트리구조, 즉 수직구조이기 때문에 데이터를 그에 맞게 한 방향으로 흐르게 해야 혼선을 줄일 수 있기 때문이다. 따라서 상위 컴포넌트에서 하위... 프롭스리액트vue뷰ReactPropsProps 4장. React Props 사용 📌 Props란? 컴포넌트 끼리 값을 전달하는 수단 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용한다. (하위 컴포넌트가 상위 컴포넌트의 값을 바로 참조할 수 없다는 의미를 뜻함) 객체, 배열 등 유형과 상관없이 모든 것이 전달 가능 💡 defaultProps 실수로 Props 를 빼먹은 경우, 특정 상황에 Props 를 일부러 비워야 할 경우를 대비해 설정 설정 방법-1 (최신... ReactdefaultPropsPropsstudyProps [React] Component 생성하기 (feat.props) 이번에는 props라는 개념을 사용하여 더 생산적인 Component를 만들어 보자. React는 정의해준 컴포넌트로 작성한 요소를 발견하면 JSX의 속성과 속성값을 해당 컴포넌트에 단일 객체로 전달하는데, 이 객체를 props라고 한다. Subject 안에 propsfh title과 sub을 추가하여 Subject라는 class명을 가진 Component에서 적어 주었던 내용을 속성안에 담... componentPropsProps props 사용법 props 는 속성 이라고 볼 수 있다. 버튼 2개에 같은 스타일을 주고싶은데, 이렇게 하면, 굳이 같은 스타일을 중복해서 2번 사용해야 한다. 저 속성들을 따로 담아주고 그것을 재사용하는것이 바람직해보인다. 그래서 아예 Btn 이라는 컴포넌트를 만들어주고, <Btn/>컴포넌트 2개를 App 컴포넌트 안에 넣어준다. 하지만 버튼마다 텍스트를 각자 다르게 작성, 변경 등을 하고 싶다. <img... Props리액트Props TIL27)react (state,props,event ) react 를 사용하기 위해 먼저 import를 사용합니다. 위 코드와 아래 코드 뜻은 같습니다. 요즘은 아래 처럼 써도 기능합니다. jsx에서 스타일을 줄때 객체 형태로 인라인 스타일을 줘야 합니다. 카멜케이스로 사용하며 자바스크립트 문법을 넣을때는 {}를 사용하여 감싸줘야 합니다. 스타일(style)은 객체형태로 써야 하기 때문에 {{}} 두개가 사용됩니다. 화살표 함수 말고 일반 함수를... State리액트인라인스타일import여러가지사용법PropsProps TIL | Props & Event 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체 props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있다. Props 객체 위에서 props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체라고 했다. 클래스형 컴포넌트에서 props, 즉 컴포넌트의 속성은 다음과 같이 정의한다. titleColor의 값으로 th... EventTILReactPropsEvent
[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기 [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] 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 TIL React #18 - 3.20 Component의 개념: Javascript를 통해서 사용하다보면 각 태그마다 엄청많은 양의 코드가 들어갈 수 있다. 협업을 한다고 하면 동료들에게 가독성이 떨어질 수 있고 개인에게도 나중에 원하는 코드를 찾고 싶을 때 찾기 힘들다. 그래서! Component, 즉 사용자에게 보여질 UI(화면)을 잘개 독립적인 형태로 쪼개어서 가독성이 뛰어나게 만든게 Component의 역할 즉, Comp... componentPropsProps [Vue vs React] Props Props의 개념을 이해해야 하는 이유는 Vue가 되었든 React가 되었든 단방향 데이터 흐름을 특징으로 하기 때문이다. 데이터를 한 방향으로만 흐르도록 설계했다는 이야기인데, 이유는 웹페이지의 구조가 결국은 상위 컴포넌트에서 하위 컴포넌트로 이어지는 트리구조, 즉 수직구조이기 때문에 데이터를 그에 맞게 한 방향으로 흐르게 해야 혼선을 줄일 수 있기 때문이다. 따라서 상위 컴포넌트에서 하위... 프롭스리액트vue뷰ReactPropsProps 4장. React Props 사용 📌 Props란? 컴포넌트 끼리 값을 전달하는 수단 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용한다. (하위 컴포넌트가 상위 컴포넌트의 값을 바로 참조할 수 없다는 의미를 뜻함) 객체, 배열 등 유형과 상관없이 모든 것이 전달 가능 💡 defaultProps 실수로 Props 를 빼먹은 경우, 특정 상황에 Props 를 일부러 비워야 할 경우를 대비해 설정 설정 방법-1 (최신... ReactdefaultPropsPropsstudyProps [React] Component 생성하기 (feat.props) 이번에는 props라는 개념을 사용하여 더 생산적인 Component를 만들어 보자. React는 정의해준 컴포넌트로 작성한 요소를 발견하면 JSX의 속성과 속성값을 해당 컴포넌트에 단일 객체로 전달하는데, 이 객체를 props라고 한다. Subject 안에 propsfh title과 sub을 추가하여 Subject라는 class명을 가진 Component에서 적어 주었던 내용을 속성안에 담... componentPropsProps props 사용법 props 는 속성 이라고 볼 수 있다. 버튼 2개에 같은 스타일을 주고싶은데, 이렇게 하면, 굳이 같은 스타일을 중복해서 2번 사용해야 한다. 저 속성들을 따로 담아주고 그것을 재사용하는것이 바람직해보인다. 그래서 아예 Btn 이라는 컴포넌트를 만들어주고, <Btn/>컴포넌트 2개를 App 컴포넌트 안에 넣어준다. 하지만 버튼마다 텍스트를 각자 다르게 작성, 변경 등을 하고 싶다. <img... Props리액트Props TIL27)react (state,props,event ) react 를 사용하기 위해 먼저 import를 사용합니다. 위 코드와 아래 코드 뜻은 같습니다. 요즘은 아래 처럼 써도 기능합니다. jsx에서 스타일을 줄때 객체 형태로 인라인 스타일을 줘야 합니다. 카멜케이스로 사용하며 자바스크립트 문법을 넣을때는 {}를 사용하여 감싸줘야 합니다. 스타일(style)은 객체형태로 써야 하기 때문에 {{}} 두개가 사용됩니다. 화살표 함수 말고 일반 함수를... State리액트인라인스타일import여러가지사용법PropsProps TIL | Props & Event 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체 props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있다. Props 객체 위에서 props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체라고 했다. 클래스형 컴포넌트에서 props, 즉 컴포넌트의 속성은 다음과 같이 정의한다. titleColor의 값으로 th... EventTILReactPropsEvent