리액트를 다루는 기술 책 공부

함수형 컴포넌트 위주로 책이 진행됩니다.props 넘겨봤습니다. (부모자식관계)오예props 기본값 설정: defaultProps 책 094태그 사이의 내용을 보여 주는 children비구조화 할당문법을 통해 props 값 추출 (destructuring)propTyp

HTML에서 에벤트를 설정할 때는 큰따옴표 안에 실행할 ㅅ코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달합니다.DOM 요소 (div, button, input, form, span) 에는 이벤트를 설정할 수 있지만, 컴포넌트에는 이벤트를 설정할 수 없습니다.리액

ref란 DOM에 이름을 달아서 참조하는 것 입니다.거의 사용하지 않아야하고, 특수한 상황에서만 사용해야 합니다.특수상황일때 (Focus, Scroll)다른 컴포넌의 함수를 실행시키고 싶을때!근데 2번은 위험합니다. 스파게티코드가 될 가능성이 높기 때문입니다.기본적으로

맵 함수는 기존 배열로 새로운 배열을 만드는 역할을 합니다.그래서 배열에 데이터가 있을 때, tag 랑 합쳐 새로운 스트링 배열로 만드는 경우 많이 사용됩니다.이런걸 컴포넌트 배열이라고 하는것 같은데.. 여기에는 key 값이 있어야합니다.key가 없으면, 새로운 값이

클래스형 라이프싸이클에 대해 설명을 합니다.

그냥 계속 써왔던 상태관리 함수마운트(렌더링) 이후 + 업데이트(리렌더링) 이후컴포넌트가 언마운드 되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect 에서 뒷정리(cleanup) 함수를 반환해 주어야 합니다.코드가 그냥 더 복잡해진것 같은데

설정하는 법이 중요한 것 같습니다.9.4 styled-components 부분은 안릭고 넘어갔습니다.

10장을 따라하면서 겪었던 에피소드를 적겠습니다.yarn create-react-app 로 해서 안됐습니다.아래처럼 create 다음에는 '-' 가 없습니다.Prettier 설정 안하고 넘어갔습니다.이 파일이 없어도 기본 디폴트 파일이 있는것 같습니다.기본 pretti

11장까지 오기위해 1 ~ 10장 을 두번 읽었습니다.많은 데이터를 리턴하는 함수를 만들어서 2,500 개를 자동으로 생성했습니다.주의할 점은 useState의 기본값에 함수를 넣어 주었다는 것 입니다.(배열이 리턴됩니다.) 여기서 useState(createBulkT

실습한 코드

예전에는 사용자에게 보이는 화면을 서버 측에서 준비했습니다. (HTML)사용자와의 인터랙션이 자주 발생하는 모던 웹에서는 적당하지 않을수도 있습니다. 그래서 리액트 같은 라이브러리는 뷰 렌더링을 사용자의 브라우저가 담당하도록 합니다. (예전엔 아닌었나보네)사용자와의 인

카테고리 별로 뉴스를 보여주는 프로젝트를 진행해 보겠습니다. 비동기적으로 처리한다면 웹 어플리케이션이 멈추지 않기 대문에 동시에 여러가지 요청을 처리할 수도 있고, 기다리는 과정에서 다른 함수도 호출할 수 있습니다.비동기 작업을 할 때 대부분 콜백 함수를 사용합니다.(

Context를 만듭니다.Consumer라는 컴포넌트를 통해서 색상을 조회해봅니다. 컴포넌트의 children이 있어야할 자리에 일반 JSX 나 함수를 전달!! (Render Props)App에 렌더링 하면이렇게 검은색으로 나옵니다.Provider 를 사용해서 Cont

액션, 액션생성함수, 리듀서, 스토어, 디스패치, 구독 이런게 있습니다.프로젝트를 만들면서 배워보겠습니다.pacel index.htmlyarn add redux// index.css.toggle { border: 2px solid black; width: 64px;

컴포넌트가 가진 state는 프로젝트의 규모가 커짐에 따라 상태 관리가 번거로워질 수 있습니다.리덕스를 사용하면, 상태 업데이트에 관한 로직을 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수하는데 도움이 됩니다.여러 컴포넌트에서 동일한 상태를 공유해야 할