리액트 공식문서 학습기록 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..

리액트 공식문서 학습기록 https://react.dev/learn Importing and Exporting Components 실습 그냥 js문법임. 섞어쓰는 예제 하나로 정리 끝. 재사용성 중첩된 컴포넌트는 분리하는게 좋다. 🤔 안다. 그래서 어디까지 어떻게 분리할 것인가? 아토믹 디자인 패턴 참고) next.js나 nuxt.js, sveltekit 등을 쓴다면 같은 레이아웃내에서 내용물만 바뀔땐 해당 프레임워크의 layout 기능을 이용하는게 리렌더링이 일어나지 않아서 더 성능이 좋음. import Layout from './Layout.js'; const App = () => { return ( 페이지내용들.. ); } export default App; 왠만하면 페이지별로 요렇게 쓰지 말란 이..

제로초님 강의 정리 https://www.inflearn.com/course/next-react-query-sns MSW 목업 mswjs.io public 폴더의 mockServiceWorker.js가 호출을 가로채서 목업 서비스를 하는 방식 컴포넌트 생성 후 브라우저인지 체크하고 환경변수를 통해 로컬환경에서 끄고 킬 수 있는 방식으로 정리되어 있음. next.js와 매끄럽게 호환이 안됨. 노드 서버의 도움을 받아야함. 어차피 express로 실행을 해야된다면 FE 코드와 분리하여 환경변수로 서버 주소를 바꾸는 방식이 더 낫지 않나 라는 생각이 듬. pocketbase 등을 활용하면 실제로 CRUD 테스트까지 가능함. 서버 컴포넌트에서 Server Actions 사용하기 함수안에 “use server”;..

제로초님 강의 정리 https://www.inflearn.com/course/next-react-query-sns ActiveLink 만들기 라우터에서 현재 경로를 알고 싶으면 use client를 사용하여 클라이언트 컴포넌트 이용 import { useSelectedLayoutSegment } from “next/navigation”; "use client"; import { useSelectedLayoutSegment } from "next/navigation"; const NavMenu = () => { const segment = useSelectedLayoutSegment(); console.log(segment); //경로 출력 return ( NavMenu ) } export default ..