새로움으로 가득한,

꾸준한 사람이 되자😎

Blog/React.js

🤷‍♀️ 컴포넌트의 생애주기(Lifecycle) Lifecycle은 컴포넌트의 탄생부터 죽음까지의 단계를 말하며, 여러지점에서 개발자가 작업을 수행 할 수 있도록 매서드를 오버라이딩 할 수 있게 해준다. Lifecycle은 클래스형 컴포넌트에서만 사용이 가능하다. 그렇다면 화살표 함수로 만든 함수형 컴포넌트에서는 못쓰는 걸까? 리액트의 기능인 React Hooks를 활용하면 함수형에서도 충분히 사용 가능하다. 🤷‍♀️ React Hooks 이란? 2019년06월 정식 출시된 기능으로, Class형 컴포넌트의 길어지는 코드길이 문제를 보완하고 중복코드, 가독성 문제 등등을 해결하기 위해 등장했다. 👉 리액트의 함수형 컴포넌트에서 라이프사이클을 제어 하기 위해서는 useEffect라는 React Hooks를..

2022. 2. 22.

Blog/React.js

목표 - LIST에 배열을 이용한 아이템 동적 수정 - With 조건부 렌더링 1. DiaryItem.js 수정하기 버튼 생성 2. 삭제 버튼 핸들러 따로 생성 const handleRemove = () => { if(window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)) { onRemove(id); } }; ~~~~~ 삭제하기 3. 상태변경 수정 함수 생성 // 👉 isEdit => 수정중인지 수정중이 아닌지 값을 보관 const [isEdit, setEdit] = useState(false); // 👉 toggleIsEdit => 원래 isEdit가지고 있던 값을 반전 시킴 => 블리언값 반전 const toggleIsEdit = () => setIsEdit(!isEdit); ..

2022. 2. 21.

Blog/React.js

목표 - LIST에 배열을 이용한 아이템 동적 삭제 1. 삭제버튼 추가 2. 데이터 추가와 마찬가지로 app 컴퍼넌트에 data state값을 바꿔줘야한다 => 삭제할 데이터를 뺀 배열로 업데이트 3. app.js에 onDelete 함수 생성() => DiaryItem에 있는 삭제버튼이 호출 할 수 있도록 부모인 DiaryList.js에 함수 전달 4. DiaryList.js에서 아이템(목록)을 불러오는 부분에 함수 전달 {diaryList.map((it) => ( ))} 5. 버튼 클릭시 함수 호출 하여 id값 전달 const DiaryItem = ({onDelete, id, author, content, emotion, create_date}) => { return ( ~~~~~ { if(window..

2022. 2. 17.

Blog/React.js

목표 - LIST에 배열을 이용한 아이템 동적 추가 - WIth React처럼 생각하기 React의 컴포넌트&데이터 구조 - 유연한 사고를 위해 컴포넌트 트리 그리면서 작업하기 - 같은 레벨에서의 데이터 교환 불가 - 스테이트 끌어올리기를 통해 데이터를 전달 (단방향 이벤트 흐름, 역방향 이벤트 흐름) 1. app.js 일기 배열 함수와 새로운 데이터 추가 함수 생성 function App() { const [data, setData] = useState([]); // 👉 일기데이터 배열 저장 const dateId = useRef(0); // 👉 id의 index 때문에 만듦 // 👉 일기배열에 새로운 데이터를 추가하는 함수 const onCreate = (author, content, emotion)..

2022. 2. 16.