본문 바로가기

전체 글

 (28)
[개념정리 15탄] React State / useState state 컴포넌트 내부에서 바뀔 수 있는 값을 말한다. 그리고 useState라는 Hook함수를 통해 이 state의 상태를 변경해줄 수 있다. function GrandFather() { const [name, setName] = useState("김할아"); // 이것이 state! return ; } 코드처럼 통상 react에서는 구조분해할당 문법을 통해 useState를 선언하고 사용한다. state의 값을 변경하는 방법이 빠질 수 없는데, useState로 state값 변경하는 법 import React, { useState } from "react"; function Child(props) { return ( { props.setName("박할아"); }} > 할아버지 이름 바꾸기 {prop..
[개념정리 14탄] React Props / childern Props란? 부모 컴포넌트로부터 받아온 데이터이며 부모에서 자식으로만 일방통행으로 전달이 가능하다. Props 예시 import React from "react"; function GrandFather() { return ; } function Mother() { const name = "홍부인"; return ; // "props로 name을 전달했다" } function Child(props) { console.log(props); // object 타입이기때문에 안에 속성값인 .motherName으로 불러올 수 있다. return {props.motherName}; // props를 통해 받아오기 } function App() { return ; } export default App; // pro..
[개념정리 13탄] React 컴포넌트 / JSX 컴포넌트(Component) 간단히 설명하면 화면을 구성하는 하나의 단위(블럭)이라 할 수 있다. 예를 들어, 검색 컴포넌트, 로그인 컴포넌트, 상품리스트 컴포넌트, 추천 상품 컴포넌트 등 html 한 페이지를 각각의 컴포넌트로 나누어 작성할 수 있다. 컴포넌트를 사용함에 있어 장점은 계속 재사용이 가능한것, 유지보수가 비교적 쉬운 것, 협업하기 좋은것이 있다. 단점으론 프로젝트 크기가 커질수록 컴포넌트의 갯수가 많아지기 때문에 폴더구조가 복잡할 수 있다. 예시 function App(){ return } 결국 html을 리턴하는 함수가 컴포넌트다. 컴포넌트 코드 보는 방법(CRA 직후 App.js 파일) // 컴포넌트 밖, 필요한 파일 import import logo from "./logo.svg";..

티스토리툴바