alex im

Effect Hook side effect를 수행할 수 있다. Side Effect란? 데이터 가져오기 구독(subscription) 설정하기 수동으로 React 컴포넌트 DOM 수정하기 결과를 예상할 수 없는 것 렌더링 과정에서 구현할 수 없는 작업 다른 컴포넌트에 영향을 줄 수 있는 작업 정리(Clean-up)를 이용하지 않는 Effects 네트워크 리퀘스트, DOM 수동 조작, 로깅 등은 정리가 필요 없는 경우들이다. 이러한 예들은 실행 이후 신경 쓸 것이 없기 때문 useEffect가 하는 일 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말한다. useEffect 안의 함수는 DOM 업데이트를 수행한 이후에 불러낸다. useEffect를 컴포넌트 안에서 불러내는 이유 effect를 통해 ..

State 끌어올리기 state는 렌더링에 그 값을 필요로 하는 컴포넌트에 먼저 추가된다. 그러고 나서 다른 컴포넌트도 역시 그 값이 필요하게 되면 그 값을 그들의 가장 가까운 공통 조상으로 끌어올리면 된다. 다른 컴포넌트 간에 존재하는 state를 동기화시키려고 노력하는 대신 하향식 데이터 흐름에 기대는 걸 추천 어떤 값이 props 또는 state로부터 계산될 수 있다면, 그 값을 state에 두는 걸 추천하지 x 합성 (Composition) vs 상속 (Inheritance) 어떤 자식 엘리먼트가 들어올 지 예상할 수 없는 컴포넌트 범용적인 "박스" 역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼 수 있다. 이러한 컴포넌트에서는 특수한 children prop을 사용..

JSX const element = Hello, world!; JavaScript를 확장한 문법 JavaScript 모든 기능이 포함 React "element"를 생성한다. React + JSX 리엑트에서는 본질적으로 렌더링 로직이 UI 로직과 연결된다는 사실을 받아들인다. 리엑트는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 "컴포넌트" 라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다. JSX는 HTML 보다는 JS에 가깝기 때문에 React DOM은 HTML 어트리뷰트 이름 대신 카멜케이스 규칙을 사용한다. JSX에 표현식 포함하기 JSX에 중괄호 안에는 유효한 모든 JS 표현식을 넣을 수 있다. JSX도 표현식이다. JSX는 객체를 표현한다. Bab..

react router v5에서 v6으로 업데이트되면서 많은 게 바꼈는데 기능상의 업데이트 보다는 문법이 많이 바뀜. 직관적으로 많이 바꼈다고 함. Reach Router라는 것과 합쳐져셔 많이 바꼈다고 함. 문서를 볼 때 아래의 단어가 있다면 v5이다. Switch (Routes로 바꼈다.) exact (path와 정확하게 일치하는 경우에만 이동하라는 건데 v6에서 없어졌다.) params history.push or history.replay (useNavigate로 바꼈다.) history.goback() (뒤로 가는 기능으로 navigate(-1)로 쓸 수 있다. 2페이지 전: -2) react router는 눈속임이다. 페이지가 여러 개 있는 게 아니라 여러 개 있는 척 하는 것. (실제로는 페..

dispatch, store, action.. 뭔가 많아 보이고 복잡해보여서 그렇지 정말 기초는 간단한 것 같다. 1. action은 이벤트를 설명하는 이름인 타입을 가지고 있는 "객체" 이고 2. dispatch(action) 을 호출하면 (dispatch는 이벤트 트리거라고 할 수 있다.) 3. reducer에 이전 state와 action이 담겨 실행되면서 action의 타입과 맞는 부분이 실행되고 새로운 state를 내뱉는다. 그리고 store는 dispatch, getState, subscribe 메서드가 담겨있는 객체일 뿐이다. 오늘 다른 사람의 코드를 봤을 때 내가 공부했던 것과 달라보여서 너무 혼란스러웠는데 알고보니 thunk 미들웨어 때문이었다. (action 생성자 함수가 type만을 ..

웹팩은 js, jsx, css 등 파일들을 모아 하나의 JS파일로 만들어준다. creat-react-app 으로 react 프로젝트를 시작하게 되면 따로 자동으로 webpack 환경 셋팅이 된다. 리액트에서 컴포넌트가 담긴 파일(js, jsx....)들을 모아 하나의 파일처럼 사용할 수 있는 이유가 webpack에 있다. 📗 Webpack Entry, Output Webpack에서 제일 중요한 2가지가 바로 Entry와 Output이다. Entry point - 모든 의존 객체들이 모인 웹팩의 시작점을 정의한다. Output - 빌드 과정에서 어느 곳에 js파일과 정적 파일들을 모을지 정의한다. 📗 creat-react-app 하지 않고 react 시작하기 1. root 폴더에서 npm init (pac..

삭제하기 버튼 옆에 수정하기 버튼을 만들고 일기를 수정할 수 있게 만들어보자. 1. 수정하기 버튼 만들기 2. isEdit이라는 state를 만들어 버튼을 클릭했을 때 true가 되고 수정할 수 있는 칸이 나오게 해보자 const [isEdit, setIsEdit] = useState(false) const toggleIsEdit = () => setIsEdit(!isEdit); toggleIsEdit을 만들어 isEdit을 반전시키는 토글 함수를 만들고 버튼에 onClick 이벤트에 toggleIsEdit을 넣어주자. {isEdit ? ( ) : {content}} 수정하기 삭제하기 일기가 들어가는 content부분에 삼항연산자를 사용하여 isEdit이 true일 때는 textarea가 뜨고 false..

1. App.js에서 onDelete 함수를 만든다. 2. prop으로 DiaryList에 전달해준다. const onDelete = (targetId) => { const newDiaryList = data.filter((it) => it.id !== targetId) setData(newDiaryList) } return ( ); 3. DiaryList에서 DiaryItem으로 onDelete 함수를 전달해준다. 4. DiaryItem에서 삭제 버튼을 만들고 onClick 이벤트 안에 prop으로 받은 onDelete를 넣어 id를 전달시켜준다. { console.log(id) if (window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)) { onDelete(id); } }} ..

리액트에서는 같은 레벨의 컴포넌트에서는 데이터를 주고 받는 게 불가능하다. 리액트에서는 데이터는 위에서 아래로 단방향으로 흐른다. 이벤트는 아래에서 위로 올라갈 수 있다. 같은 레벨에서 데이터를 주고 받기 위해서는 같은 state를 공통 부모로 끌어올려서 사용할 수 있다. 현재 상황 DiaryEditor와 DiaryList는 현재 같은 레벨에 있다. DiaryEditor에서 일기를 작성하면 DiaryList에서 그걸 받아서 일기 리스트 화면에 보여주려고 한다. 이 두 컴포넌트가 데이터를 공유하려면 같은 state를 공통 부모로 삼아 prop으로 내려 받아서 공유할 수 있다. App에서 공통 부모로 삼을 data state를 만들어주고 새로운 일기를 만들 onCreate함수를 만들었다. onCreate는 ..

일기 리스트에 일기 저장한 리스트가 뜨도록 만들기 먼저 App.js에 테스트를 위해 dummyList를 만들어보자. import './App.css'; import DiaryEditor from "./DiaryEditor" import DiaryList from "./DiaryList" const dummyList = [ { id: 1, author: "임", content: "hi", emotion: 5, create_date: new Date().getTime(), }, { id: 2, author: "박", content: "hi2", emotion: 2, create_date: new Date().getTime(), }, { id: 3, author: "최", content: "hi3", emot..