공부기록용

State State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미하는 것으로 별도로 상태를 관리하는 것이다. UI를 바꾸기 위해서 사용하는 것이다.(렌더링을 다시하기 위함으로 변경되야 하는 값들을 위해 사용하면 된다.) State 만들기 State를 만들 때는 useState()를 사용한다. useState 는 state를 만들어주는 리액트에서 제공하는 기능입니다. 그래서 리액트에만 존재하는 개념이자 기능입니다. 그리고 앞으로 우리는 이것을 “기능” 이라고 하지 않고 “훅” 이라고 표현하겠습니다. useState 훅을 사용하는 방식 const [ value, setValue ] = useState( 초기값 ) 먼저 const 로 선언을 하고 [ ] 빈 배열 을 생성하고, 배열의 첫번째 자리에는 이 sta..

구조분해 할당과 Props 구조 분해 할당 통해 props 내부값 추출하기 1. 구조분해할당 해보기 // src/App.js import React from "react"; function App() { // 객체 존재 const testObj = { name: "mini", age: 28, company: "sparta" } // 새로운 변수 할당 const { name, age, company } = testObj; // 해당 key의 이름을 가진 value들을 뽑아옴 // value들이 출력됨 console.log(name); // mini console.log(age); // 28 console.log(company); // sparta return App } export default App; ..

// src/App.js import React from "react"; function User(props) { console.log(props) return {props.name}; } function App() { const name = "상위컴포넌트이름" return ; } export default App; Props Children 이렇게 props를 보내던 방식과는 조금 다르다 정보를 받는 방식은 기존과 동일합니다. 대신 그 이름이 children 으로 정해져 있다. // src/App.js import React from "react"; function User(props) { console.log('props', props); return {props.children}; // 2.reac..

props 컴포넌트간의 정보교환/교류 방식, 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터 props는 반드시 위에서 아래 방향으로 흐른다. 즉, [부모] → [자식] 방향으로만 흐른다(단방향). props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다. Mother컴포넌트에서 Son컴포넌트로 name = '흥부인' 이라는 정보를 전달했다 import React from 'react'; // 자식 function Son() { return 나는 아들입니다.; } // 엄마 // Mother -> Son 으로 정보를 전달했다. function Mother() { const name = "흥부인"; return ; // Mother컴포넌트에서 Son컴포넌트로 다음과 같은 정보를 내려줬다_props } ..

JSX란 JavaScript를 확장한 문법으로 JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법이다. 기본적으로 return문 안에 존재하며 JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그린다. (-> 우리가 실질적으로 코드를 작성하는 App.js를 index.js에서 createRoot를 한 다음에 render한다. 만들어 놓은 App.js를 React에서 render를 하면서 화면에 그려나가는 것이다._render하면서 DOM에 렌더링을 시키는 것이다.) HTML을 품은 JS ⇒ JSX 아래 같은 HTML 태그는 .js 파일 안에서 쓸 수 없다. 안녕하세요! 시작이 반이다! ​ ▼ 자바스크립트 안에서 html 태그같은 마크업을..

React Component Component 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다. 개념적으로 컴포넌트는 JavaScript 함수와 유사하다. “props”라고 하는 임의의 입력_input을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환_output한다. 클래스형 컴포넌트 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 함수형 컴포넌트 // props라는 입력을 받음 // 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return) function Welcome(props) { re..