useEffect()는 componentWillUnMount, componentDidMount, componentDidUpdate의 속성을 모두 가지고 있다 component가 처음 렌더링되면 useEffect()의 첫번째 인자로 들어가는 함수가 didMount에 해당하여 바로 실행된다 useEffect()의 두번째 인자에는 의존성이 들어가는데, 의존성은 처음 페이지가 렌더링 된 후 상태가 변화하는 값을 의미하며 배열 형태로 입력한다 의존성이 있다면, 해당 상태가 변화할 때마다 useEffect()의 첫번째 인자가 didUpdate로서 실행되고, 의존성이 빈배열이라면 첫번째 인자는 다시 실행되지 않는다 두번째 인자가 아예 비어 있다면 첫번째 인자는 매번 업데이트 된다(따라서 빈배열이라도 꼭 넣을 것) 마..

배열 합치기 const fruits = ["apple", "banana", "kiwi"]; const berry = ["strawberry", "blackberry", "grapeberry"]; const fruits = ["apple", "banana", "kiwi", ...berry]; 객체 합치기 const fullName = { fName: "Tom", lName: "Cruise" }; const actor = { ...fullName, age: 50, genre: "Action" }; *객체를 합칠 때 위에서처럼 ...를 쓰면 fullName의 원소들과 actor의 원소들이 같은 레벨에 위치하게 되지만, const actor = { fName: "Tom", lName: "Cruise", age:..

성과 이름 2개의 input을 가지고, 입력값을 실시간으로 태그에 보여주는 App이 있다. 물론 아래와 같이 useState를 input마다 할당할 수 있지만, 계속 함수가 중복됨을 볼 수 있다. import React, { useState } from "react"; function App() { const [fName, setfName] = useState(""); const [lName, setlName] = useState(""); function handlefNameChange(e) { setfName(e.target.value) } function handlelNameChange(e) { setlName(e.target.value) } return ( Hello {fName} {lName} S..

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

UI = function (state) 물은 얼음과 같은 성분이지만, 온도에 따라 다른 상태를 가진다. 마찬가지로, React Component(ex. )는 요소 자체는 그대로이지만, 상태를 담당하는 변수의 값에 따라 다른 UI를 가진다. React에서 UI를 변경하는 데에는 Declarative Programming과 Imperative Programming 2가지 방식이 있다. Declarative는 .jsx(js) 파일 상단에서 선언했던 상태 저장용 변수를, UI 변경을 담당하고자 만든 커스텀 함수의 body에서 변형시킴으로써(true->false처럼 toggle을 쓰는 등) 목적을 달성하는 방법이다. Imperative는 document.querySelector 등으로 해당 HTML 요소에 접근하..

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