Render Props는 리액트에서 컴포넌트 간에 코드 재사용을 쉽게 하기 위한 패턴이다. 주로 함수형 컴포넌트에서 사용되며, 컴포넌트의 props로 함수를 전달받아 렌더링 동작을 동적으로 정의할 수 있다.  Render Props 기본 예제 function DataFetcher({ render }) { const data = { name: 'Alice', age: 25 }; // 가상의 데이터 return {render(data)};}function App() { return ( Name: {data.name}, Age: {data.age}} /> );}DataFetcher 컴포넌트는 render라는 prop으로 함수를 받는다.이 함수는 데이터를 렌더링할..

React를 사용한다면, HTML 요소들을 태그로 묶어 한번에 렌더링할 때 어떤 변수의 값에 따라 UI가 변하기 마련이다. 여기서 "어떤 변수"는 보통 의 을 통해 유저로부터 받은 값을 같은 태그에 업데이트 시키는 데 사용되는 변수, 즉 state 변수를 의미한다. (ex. isLogin의 값이 true일 때 버튼의 value가 logout으로 바뀐다면, 여기서 state변수는 isLogin) 이때 업데이트 value를 담은 과 value를 반영한 은 같은 state 변수로 통일해야 한다. 이를 "신뢰 가능한 단일 출처"라고 한다. // App.jsx import React, { useState } from "react"; function Login() { const [isLogin, setLogin] ..

React는 한 페이지를 구성하는 요소들을 잘게 쪼개어 모듈화하기 때문에, 레고처럼 조립과 분해로 유지보수가 쉬운 장점이 있다. 그렇기 때문에, 나의 웹사이트에서 "자주" 쓰이는 디자인을 .jsx로 한데 모아 정의해놓고, props를 이용하여 그때그때 표시되는 정보만 갈아끼우면 정말 최고의 효율성을 가져다준다. 여기서 "자주" 쓴다는 것은, CSS의 .클래스마냥 를 여기저기서 끌어다쓸 수 있다는 것인데, 한번 생각해보자. 우리가 항상 접하는 웹페이지는 게시판 목록이나 피드를 보면 알 수 있듯이, 틀은 다 똑같고 안에 내용만 바뀌는 형태가 압도적으로 많다. 그렇다면 각 글이나 사진이 같은 형태로 무수히 반복된다는 뜻이다. 이 많은 태그들을 일일이 수작업하지 않고, 그 전체 수만큼 알아서 반복문 돌려주는 것..

props는 properties의 약자다. HTML에서 태그에는 src="", alt="" 같은 속성이 있었다. 지금 React를 사용하는 우리는 HTML 태그를 JavaScript에서 그대로 다루기를 원하고, 그래서 존재하는 것이 JSX 파일이다. 그렇다면 JSX에서도 HTML 태그 내 속성을 이용할 수 있어야 하는데, 방법은 간단하다. 나만의 커스텀 태그가 라고 가정하면, Profile의 정의는 다음과 같다. // Profile.jsx import React from "react"; function Profile (props) { return ( {props.name} {props.tel} ) } export default Profile; 인자로 props라는 키워드를 사용하며, 이는 다음과 같이 앞..

// Heading.jsx import React from "react"; function Heading () { return My Stacks } export default Heading; // List.jsx import React from "react"; function List () { return ( HTML/CSS/JS NodeJS Python Django React Flutter ) } export default List; // App.jsx import React from "react"; import Heading from "./Heading"; import List from "./List" function App () { return ( ) } export default App; // i..

// Vanilla const div = document.getElementById("root"); const h1 = document.createElement("h1"); const ul = document.createElement("ul"); const li1 = document.createElement("li"); const li2 = document.createElement("li"); const li3 = document.createElement("li"); const li4 = document.createElement("li"); const li5 = document.createElement("li"); const li6 = document.createElement("li"); h1.inner..