# Props
React - props & method & setState
props 부모 컴포넌트가 자식컴포넌트의 속성으로 state의 정보를 객체로 넘겨줄 수 있고, 넘겨받은 객체를 props 키워드를 통해 사용하거나 다시 자식의 자식 객체로 넘겨 줄수 있다. state는 하위(자식) 컴포넌트에서 직접 접근할 수 없다. 그러나 간접적으로 접근 할 수 있는 방법은 있다. 바로 부모 컴포넌트가 가지고 있는 메서드를 통해서 ...
React - props
React는 임의로 정의한 Element를 만나면 JSX artibute를 해당 컴포넌트에 단일 객체로 전달한다. 이 객체를 props라고 한다.
React : 자식에서 부모의 state 변경
리액트에서 부모컴포넌트에서 자식 컴포넌트로 props를 넘겨주는 것은 매우 쉽다. 하지만 반대로 자식에서 부모의 컴포넌트의 state를 변경해줘야 하는 일이 필요하다. 어떻게 하면 바꿀 수 있을까 ?? 바로 form 태그를 사용해서 바꿀 수 있다. 출처는 이곳이다. 이곳에 나와 있는 설명을 풀어보면 다음과 같다. 부모컴포넌트에서 자식 컴포넌트로 onS...
[React] Core Concepts(JSX, Component, Props, State, Life Cycle…)
React Core Concepts React 사이트에 정의된 React 가 무엇인지 확인해보면, A JavaScript library for building user interfaces, 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 (프레임워크) 즉, UI 를 보다 쉽고 간편하게 만들기 위한 JS 라이브러리입니다. 그렇다면 이 Re...
props / children / 비구조화 할당
(*App 컴포넌트 = 부모 컴포넌트) props : 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값. 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. 함수형 컴포넌트 경우, 스크린샷 2019-12-31 오전 2.00.06.png 해당 컴포넌트에서 name 이라는 props를 렌더링함. props 값은 컴...
props 기본값 설정해주기
props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소. >#### props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서만 설정할 수 있음. ↓ index.js ↓ cha.js 첫번째 방법 ↓ 결과 1 스크린샷 2019-12-22 오후 11.06.05.png ↓ cha.js 두번째 방법 ...
React TypeScript - Props 사용법
TypeScript를 활용하여 React 개발을 할때의 좋은 점 중 한가지는 바로 Props를 받는 쪽에서 정할 수 있다는 점이다. Props로 지정할 수 있는 변수들의 이름과 형태까지 지정해 줄 수 있어서 자식 컴포넌트에 Props를 넘겨줄 때 일어나는 문제점을 미리 방지 할 수 있다. 그렇다면 간단하게 어떻게 Props를 정의해주고 활용하는지에 대해 ...
[next.js] Router를 통해 props 기능 구현
우선 props를 보낼 곳에서 Router를 import 합니다. button을 이용해 해당 파일 경로와 보내고 싶은 props를 query형태로 보내줍니다. button의 모양은 대략 이렇게 생겼습니다. SendQuery 함수의 형태입니다. query를 받는 곳(/pages/register)에 { useRouter }를 import 합니다. re...
React
👉 React > 페이스북이 만든 라이브러리(하지만 Redux나 MobX, react-router와 함께 프레임워크처럼 사용) Redux 공부 check > Component 시스템을 구현했기 때문에 효율적으로 코딩 가능 👉 Component란 하나의 의미를 가진 독립적인 단위 모듈 👉JSX 자바스크립트의 확장 문법 1) 반드시 하나의 엘리먼트로 감...
2019.09.30 React
1. React? 2. ES6? ES6 문법을 알아야 리액트가 편해진다. - Destructuring - spread operator - rest parameters - default parameters - templete literals - arrow function - for-of loop 3. JSX? 자바스크립트의 확장 문법 - 반드시 하나...
