react

props.children 쓰는 이유

(React에 tailwind css 적용)Test라는 부모 컴포넌트에서 Textarea 컴포넌트로 props maxLength와 row를 전달.위의 코드를 적용하면 아래처럼 적용이 된다.

위 코드를 렌더링 하면출력 ==> 홀수

state가 변화하면 페이지가 리렌더링 되어 새로 호출 된다.1 state를 쓰기 위해서는 Counter.js에 import React, {useState} from 'react' 를 한다. 이것을 사용하겠다는 의미. 이것이 없으면 사용 불가.2 내가 사용하려는 함수

요렇게 하면 app.js에서 보낸 props가 전달되어 counter.js의 초기값이 5가 되어 출력 된다.이렇게 비구조화로 가져와도 동일한 값이 나온다.혹시 Props로 전달한 값이 많다면 하나씩 써주기 벅차다. 그러면 부모 컴포넌트에서 축약하여 자식 컴포넌트에 '펼

react props children이 없는 코드counter를 아무것도 감싸지 않고 그대로 사용결과props children이 있는 버전.Container.js로 children을 만든다. {children}이 있는 자리에 컴포넌트를 넣을 수 있다. 아래 코드는 ch

리액트에서 input에 usestate를 적용하는 코드.내가 input에 입력하는 값을 state에 저장하는 코드.e.target.value는 이벤트가 발생할 때 그 당시의 value값을 이벤트 객체에서 잡아오는 코드. 그것을 setAuthor에 넣어주면 author에

useRef => 리액트에서 돔을 선택하는 기능1 useRef(); import하고 const 함수명을 넣어 선언해준다.2 선택할 돔에 ref={}으로 이름을 준다3 선택할 돔에 명령할 코드를 입력한다. 이번 코드에서는 handleSubmit 함수를 만들어서 state

위 코드처럼 map 안에 스프레드 연산자로 it의 정보를 props로 넘겨줄 수 있다. 그런데 혹시 DiaryItem에서 값이 안 찍힌다면? {...it} 앞 뒤 띄어쓰기를 꼭 해줘야 한다. 띄어쓰기가 한쪽이라도 없을 시 값이 undefined로 뜬다.

리액트는 단방향으로만 데이터가 흐른다. 그래서 자식 <-> 자식 이렇게 데이터가 흐를 수 없다. 자식 => 부모 => 자식으로만 데이터가 흐른다. 그래서 자식 간 데이터를 주고 받으려면 자식에서 부모로 데이터를 주고 부모가 props로 자식에 데이터를 주면 된다.

data.filter로 it을 하나씩 돌리면서 it의 id가 targetId와 일치하지 않으면 필터링 해서 일치하는 애들만 newDiaryList에 담으라는 코드.리스트에서 제거하고 싶은 애를 제거하고 새 리스트를 짤 때 쓰는 코드.

data의 map이라는 내장 함수를 사용해서 바꾸려는 댓글 아이디값이 일치하면 콘텐트만 뉴 콘텐츠로 수정하고 댓글 아이디값이 일치 안하면 기존 데이터를 뿌린다. 위 코드를 app에서 만들고 props로 아래 코드까지 전달한다.handleEdit에 onEdit 코드를 넣

위에서 setIsEdit(false)의 역할은 수정을 안하고 원래 콘텐츠를 보여주는 코드. setLocalContent(content)에서 setLocalContent는 수정한 댓글을 담을 그릇인데 거기에 content(수정하기 전 원래 댓글 텍스트)를 다시 담는 것.

화면이 로딩 될 때 getData를 불러오면서 await fetch,async를 통해 api를 가져올 수 있다. console.log(res)하면 결과를 볼 수 있다. 해당 api는 가져오는 값이 500개여서 res.slice를 통해 20개로 자르고 map을 통해 원하

설치 코드아래 코드를 입력하면 원하는 경로에 원하는 페이지가 맞춰짐.혹시 페이지 이동해도 바뀌지 않았으면 하는 애들은 Routes 밖에 나오면 됨.app.js에 쓰는 코드페이지에서 페이지로 이동하려면 Link를 쓴다.

Path Variable - useParamshttp://localhost:3000/diary/1 처럼 뒤에 번호가 붙는 것은 useParams를 이용한다.Query String - useSearchParams페이지에 데이터를 전달하는 가장 간단한 방법Page

사용하는법