공부기록용

Component 컴포넌트는 리액트의 핵심 빌딩 블록 중 하나이니다. 즉 리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구성된다. 컴포넌트는 UI 구축 작업을 훨씬 쉽게 만들어준다. 컴포넌트란 리액트의 핵심 빌딩 블록 중 하나로, UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체이다. 리액트 컴포넌트가 선언체라는 개념은 아주 중요하다. 리액트의 컴포넌트기반 개발 이전에는 브라우저에서 동적으로 변하는 UI를 표현하기 위해 직접 DOM 객체를 조작하는 명령형 프로그래밍 방식으로 구현했었다. 명령형은 어떻게(How) 를 중요시여겨서 프로그램의 제어의 흐름과 같은 방법을 제시하고 목표를 명시하지 않는 형태입니다. 선언형은 무엇(What)🔻 을 중요시 여겨서 제어..

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 태그같은 마크업을..