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..

프론트엔드는 웹서비스의 얼굴로서 고객과 가장 맞닿은 부분을 책임지는 아주 중요한 역할을 한다. 기존 방식대로라면 하나의 페이지에 담긴 여러 HTML 요소의 이벤트에 따라 전체 페이지를 리로드해야했다. 하지만 페이스북에서 좋아요 하나 누른다고 전체 페이지를 리로드한다면 지금까지 내려서 보던 피드 스크롤이 날아갈 것이고, 페이지를 렌더링하는 데 필요한 파일들 역시 다시 다운로드 받아야 하는 낭비가 생긴다. 하지만 React는 DOM 트리를 항상 주시하고 있으며, 그중 변화가 생긴 부분만 새로 렌더링한다. 그렇기 때문에 더욱 빠르고 사용자 경험에 능하다고 볼 수 있다. 그리고 React는 클래스마냥 웹페이지를 구성하는 각 요소(nav바, 친구목록, 알림창 등)의 구조를 따로 정의해놓는다. 이때 각 요소들은 별..