리액트 공식문서 학습기록 https://react.dev/learn State as a Snapshot state setting은 렌더링을 트리거함. 이벤트 핸들러에 따라 리렌더링이 일어나는게 아니고 상태를 setting 했을 때 리렌더링함. 렌더링이란 React가 컴포넌트를 호출하는 것을 의미. 컴포넌트가 반환하는 JSX가 그 시간의 UI의 스냅샷과 같음 함수실행 > 스냅샷 계산(이게 아마 VDOM인가?) > DOM tree 업데이트 상태의 값의 변경은 렌더링이 끝나고 변경됨. { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }}>+3 // 렌더링이 끝나기 전까지 number의 값이 변경되지 않으므로 결과적으로 + 1이 실행..

리액트 공식문서 학습기록 https://react.dev/learn Render and Commit Trigger 렌더링되는 이유 초기 렌더링 컴포넌트(또는 조상중 하나)의 상태가 업데이트 된 경우 초기화 기존엔 state나 props에 변화가 없어도 컨테이너가 계속 전달됐음. 🤔 정확히 잘 몰루? 궁금 // Legacy root API ReactDOM.render(, document.getElementById("root")) // New root API (리액트18이상) const root = ReactDOM.createRoot(document.getElementById("root")) root.render() 렌더링 렌더링은 React가 컴포넌트를 호출하는 것 처음엔 루트 컴포넌트를 호출함. 이후엔 ..

리액트 공식문서 학습기록 https://react.dev/learn State: A Component’s Memory 리액트는 로컬 변수의 변경사항을 고려하지 않고 렌더링하고 변경이 있어도 리렌더링하지 않음. import { useState } from 'react'; const [index, setIndex] = useState(0); function handleClick() { setIndex(index + 1); } 상태관리가 필요하면 useState를 이용하여 따로 선언해주고 별도의 setter 함수가 필요함. 사족) 요기가 svelte와의 가장 큰 차이인듯. 스벨트에선 변경되지 않는 것은 상수로 선언하고 변수는 변경됨을 즉시 인식하고 리렌더링함. 위 코드를 svelte에서 구현하면 아래가 다임 ..

리액트 공식문서 학습기록 https://react.dev/learn Responding to Events nextjs에서는 ‘use client’ 선언 후 작성해야 동작함. 기본적으로 컴포넌트가 서버에서 렌더링되기 때문. 이벤트 핸들러 추가 별도 함수 가져오기 const handleClick = () => { alert('😘🥰'); } return ( ) 인라인 { alert('🤪😜'); }}> 이벤트 핸들러에 전달되는 함수는 호출이 아니고 전달되어야함. (호출되면 렌더링 시점에 실행됨) //요래 쓰면 안됨 //요래 써도 안됨. 이벤트 핸들러에서 Props 읽기 const AlertButton = ({ message, children }) => { return ( alert(message)}> {chil..

리액트 공식문서 학습기록 https://react.dev/learn Keeping Components Pure 컴포넌트는 같은 프로퍼티가 전달되면 늘 같은 결과를 반환해야함. ❌ 헷갈림 주의 : 랜덤 함수 등을 이용하여 1~6까지 반환하는 컴포넌트가 있다고 할 때 랜덤값을 컴포넌트 내에서 생성하여 반환하면 순수 함수임. 사이드 이펙트 외부 변수를 컴포넌트 내에서 계산하지 말 것. 각 컴포넌트가 순서대로 렌더링 될 것이라 예상해선 안되기 때문 👉 외부에서 계산해서 프로퍼티로 던져주자 스트릭트 모드 각 컴포넌트의 함수를 두번 호출하여 컴포넌트가 순수한지 체크해준다. 밑에 얘로 루트 컴포넌트를 감싸면 실행됨. 넥스트에선 다음과 같이 // next.config.js module.exports = { reactS..

리액트 공식문서 학습기록 https://react.dev/learn Rendering Lists js의 filter()와 map()을 사용하여 목록을 출려한다. key map이나 filter 함수내의 엘리먼트에 key 속성을 추가한다. 즉석에서 생성하지말고 데이터에 키를 포함시켜야함.( index를 사용하지 말란 이야기 ) const people = [ 'Creola Katherine Johnson: mathematician', 'Mario José Molina-Pasquel Henríquez: chemist', 'Mohammad Abdus Salam: physicist', 'Percy Lavon Julian: chemist', 'Subrahmanyan Chandrasekhar: astrophysicis..

리액트 공식문서 학습기록 https://react.dev/learn Conditional Rendering 컴포넌트는 조건에 따라 null 반환 가능. 삼항연산자를 이용하여 아래 같이 표현 가능 return ( {isPacked ? name + ' ✔' : name} ); 혹은 && 연산자를 이용하여 아래 같이 표현 가능. 왼쪽에 숫자를 넣을땐 식으로 넣도록 한다. ex) aa > 0 return ( {name} {isPacked && '✔'} ); 혹은 별도 변수를 사용해 아래와 같이 작성 가능 let itemContent = name; if (isPacked) { itemContent = name + " ✔"; } return ( {itemContent} ); 변수 뿐 아니라 jsx에도 동작 let ..

리액트 공식문서 학습기록 https://react.dev/learn Passing Props to a Component 프로퍼티는 JSX 태그에 전달하는 정보를 말함. 등 기존 태그에 전달할 수 있는 프로퍼티는 미리 정의되어 있음. 하지만 자체 컴포넌트에는 함수의 인자로 사용자 정의 프로퍼티를 전달할 수 있음. 🤔 디스트럭처링이 함수의 인자를 받는 것과 동일하다면 쓰지 말란 이야기인가? function Avatar(props) { let person = props.person; let size = props.size; // ... } 프로퍼티를 모두 전달하기 보다는 스프레드 문법을 쓰는게 효율적인 경우도 있으나 사용에 주의가 필요함. 과도하게 사용하지 말 것. function Profile(props) ..

리액트 공식문서 학습기록 https://react.dev/learn JavaScript in JSX with Curly Braces 위치 JSX 태그내에 텍스트에 사용. ex) {text} 기호 바로 뒤에 오는 속성. ex) src={image} 이중 객체를 의미함. ex) {{'aa': 1}} 는 {'aa': 1} 객체임 인라인 스타일 프로퍼티는 카멜케이스 다시봐도 참…😡 ex) 과제 1 const person = { name: 'Gregorio Y. Zara', theme: { backgroundColor: 'black', color: 'pink' } }; const TodoList = () => { return ( {person.name}'s Todos Improve the videophone Pr..

리액트 공식문서 학습기록 https://react.dev/learn Writing Markup with JSX 단일부모 요소 귀찮은디… Fragment 알아서 처리해주면 안되요?🥺 뷰3랑 스벨트는 되는디 모든 태그를 닫아라 알았다 카멜케이스 속성까지도 카멜케이스로 작성할 것. 😡 class가 예약어니까 이해는 감. 킹치만 className 불…편. js랑 html을 합쳐놓으니까 이런 혼종이😱 라는 느낌임. 🤔 aria-*, data-*은 왜 고대로 컨버터 html을 따로 작성하고 넣는 경우는 안 만들지 싶다. jsx에 익숙해지는 동안엔 도움될듯 링크 과제 const Bio = () => { return ( Welcome to my website! You can find my thoughts here. A..