Last Record(Web Develop)/React

0. 사전 준비 구글 크롬 설치 IDE 설치 git 설치 Node 설치 yarn 설치(npm 그냥 써도 됨. 말리지 않음) 1. 리액트 프로젝트 생성(Create-react-app) 터미널로 내가 프로젝트를 만들기 원하는 폴더로 이동, 혹은 VScode로 해당하는 폴더 열기 yarn create react-app 프로젝트명 그럼 프로젝트명으로 된 폴더가 생성되고 그 아래에 node_modules, public, src 등등 리액트의 프로젝트의 기본세팅이 만들어진다. VS code 폴더 열기로 생성된 프로젝트 폴더를 열었다. node_modules는 이미 깔려있는 혹은 앞으로 깔 라이브러리나 패키지에 관한 것들이 들어있다. public은 로고나 favicon 등을 관리하는 폴더이다. src가 실제 작업하는..

📣 이 자료는 Udemy의 React 완벽 가이드 강의와 React 공식문서를 참고하여 작성되었습니다. 그리고 개인적으로 공부하고 이해한 내용을 바탕으로 정리하는 용도로 작성되었으므로 이해를 돕기위한 예시는 최소화하였습니다. key? 리액트에서 map 메소드를 사용해서 어떤 컴포넌트를 렌더링할때, 콘솔창에서 이런 key에 관련된 warning을 볼 수 있다. 여기서 리액트가 말하는 key는 똑같이 생긴 컴포넌트들을 구분할 수 있는, 컴포넌트 각각의 고유한 어떤 표시를 말한다(DB로 보면 id 같은것!). 이런 key를 넣어줘야 하는 이유 중 하나는 리액트의 가상DOM과도 관련이있다. 지난 포스팅에서 리액트는 처음에 화면을 그려놓고, 그 똑같은 복사본을 메모리에 가지고 있다가 컴포넌트에 어떤 변화가 감지되..

📣 이 자료는 Udemy의 React 완벽 가이드 강의와 React 공식문서를 참고하여 작성되었습니다. 그리고 개인적으로 공부하고 이해한 내용을 바탕으로 정리하는 용도로 작성되었으므로 이해를 돕기위한 예시는 최소화하였습니다. 자식 → 부모 컴포넌트로 정보 전달하기 앞에서 다루었던 props는 부모 컴포넌트가 자식 컴포넌트에게 전달해주는 정보였다. 그럼 자식 컴포넌트는 어떻게 부모 컴포넌트로 정보를 전달해줄 수 있을까? 답은 함수를 내려주는 것이다. 부모 컴포넌트에서 자식 컴포넌트가 값을 담아줄 수 있는 함수를 만들어서 props로 전달해주는 방법이 있다. 아니면 setState를 다이렉트로 내려줘도 된다. 함수를 이용해서 전달해주는 방법 // 부모 컴포넌트 const Parent = () => { con..

📣 이 자료는 Udemy의 React 완벽 가이드 강의와 React 공식문서를 참고하여 작성되었습니다. 그리고 개인적으로 공부하고 이해한 내용을 바탕으로 정리하는 용도로 작성되었으므로 이해를 돕기위한 예시는 최소화하였습니다. 에서 받아온 여러 값을 state로 처리하는 방법 더보기 먼저, input 태그에 대한 mdn docs의 참고 자료 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input : 입력 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. developer.mozilla.org 요소는 사용자의 데이터를 받을 수 있는..

📣 이 자료는 Udemy의 React 완벽 가이드 강의와 React 공식문서를 참고하여 작성되었습니다. 그리고 개인적으로 공부하고 이해한 내용을 바탕으로 정리하는 용도로 작성되었으므로 이해를 돕기위한 예시는 최소화하였습니다. Event Listener - Event Handler 이벤트 리스너는 사용자가 어떤 이벤트를 일으켰을 때 그 이벤트를 캐치하는 것이고, 이벤트 핸들러는 그 이벤트가 일어났을 때 실행될 명령을 말한다. 리액트는 모든 기본이벤트를 on으로 시작하는 props(ex. onClick)로 노출한다. 그리고 JSX에 그 on으로 시작하는 props를 추가하는 것으로 이벤트 리스너를 만들 수 있다. ex) 그리고 이 이벤트 리스너에 연결되는 것이 이벤트 핸들러이다. 모든 이벤트 핸들러 prop..

📣 이 자료는 Udemy의 React 완벽 가이드 강의와 React 공식문서를 참고하여 작성되었습니다. 그리고 개인적으로 공부하고 이해한 내용을 바탕으로 정리하는 용도로 작성되었으므로 이해를 돕기위한 예시는 최소화하였습니다. props 부모 컴포넌트로부터 자식 컴포넌트로 전달된 데이터! 읽기 전용이므로 어떤 방식으로든 수정해서는 안된다. (수정이 필요한 경우에는 state를 사용!) 부모 컴포넌트에서 이렇게 전달하면, 자식 컴포넌트에서는 매개변수에 props를 넣어 가져오거나 매개변수의 자리에 {데이터이름}을 넣어 받아쓸 수 있다. 전달할 객체가 여러개라면, key={데이터이름}, key2={데이터이름}, key3={데이터이름}로 전달하고, props.원하는키로 해서 필요한 데이터만 골라 쓰는 것도 가능..

📣 이 자료는 Udemy의 React 완벽 가이드 강의와 React 공식문서를 참고하여 작성되었습니다. 그리고 개인적으로 공부하고 이해한 내용을 바탕으로 정리하는 용도로 작성되었으므로 이해를 돕기위한 예시는 최소화하였습니다. React : UI를 구축하는 JS 라이브러리 리액트는 여러 함수로 코드를 분리하고 해석하여 여러개의 컴포넌트로 나눠놓고, 우리가 필요할 때 짜맞춰서 전체 UI를 구축하는 것이다. HTML/CSS & JS보다 좀 더 간단히 구축가능 리액트가 하는 일은 실제 웹페이지에서 어떤 컴포넌트를 '추가, 업데이트, 삭제' 하는 것 컴포넌트 : 여러 개의 함수, 명령들을 모아 하나의 특정한 기능을 수행할 수 있도록 구성한 작은 기능적 단위 모듈이라고도 부른다. 컴포넌트의 장점 재사용 가능 - 반..