React

🕹환경 구축 및 코드 작성 및 실행하는 방법 알아보기 1. create-react-app 설치하기 react 실행 폴더에 create-react-app 실행 > cd 작업할 파일 디렉토리 목록 > create-react-app 설치가 완료되면, 확인하기 → > npm run start <img src="https://images.velog.io/...

Component 만들기 이 블록이 하나의 template이라고 생각하자! 이 코드가 바로 react의 component를 만드는 코드다. 👉 해석을 해보자면,, react가 가지고 있는 Component라는 클래스를 상속해서 App이라는 새로운 클래스를 만드는 것. 그 class는 render라는 메서드를 가지고 있다. 위 html 구조에서 각 s...

이렇게 Component들을 활용하면, 다른 페이지에서 자유롭게 사용가능하며, package화해서 소프트웨어처럼 사용할 수도 있다. ✔ 문제는 한 Component의 결과물이 항상 같다는 것이다. 기존의 html tag는 태그의 이름이라는 공통성 + 태그의 속성(attribute)라는 차별성을 통해 재사용을 높이는 장점을 가지고 있다. 👉 Rea...

✅ React Developer Tools status를 알 수 있는 도구 공식 홈페이지 ⇲ Tutorial ⇲ Overview ⇲ Developer Tools 크롬의 경우 확장자로 다운받을 수 있다. (+Firefox도) 확장 프로그램을 사용하게 될 경우, 개발자도구에서 React의 Component 트리를 검색할 수 있다. ✔React DevT...

State : 컴포넌트 내부에서 바뀔 수 있는 값 📌props 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값 사용자가 component를 사용하는 입장에서 중요한것 사용자에게 중요한 정보, component를 조작할 수 있게 한다. 📌state props값에 따라서 내부 구현에 필요한 data들 사용자가 알 필요 없는 component 내...

props, state, event -> 삼박자가 맞아야 역동적인 ui구현이 가능해진다! > 1. WEB 텍스트를 클릭하면 HTML 하단에 Welcome 메세지 출력하기 리스트 목록을 클릭하면 그 목록안의 텍스트 내용을 HTML 하단에 출력하기 App component의 state가 바뀌고, 바뀐 component가 state값으로 전달되면서 동적으로 ...

[ Mission : ToDo List - React로 구현해보기 ]

📌SPA(Single Page Application) : 단일 페이지로 이루어진 어플리케이션 한 페이지로 여려 UI들을 보여줄 수 있는 어플리케이션. 📌Router? Routing을 해주는 도구 route(라우트): 경로 , url 주소 CRA를 통해서 만든 프로젝트의 경우 기본적으로 SPA를 준수한다. 즉, react에는 단 한 개의 html이 존재...

반복되는 코드의 경우 컴포넌트화 하기 위해 배열의 내장 함수인 map함수를 사용해서 랜더링 할 수 있다. > array.map(콜백함수, thisArg) 콜백 함수 -currentValue : 현재 요소 -index : currentValue의 인덱스 값 -array: 현재 처리하고 있는 원본 배열 thisArg : 콜백함수 내부에서 사...

리액트의 컴포넌트는 생명주기를 가지고 있다. 컴포넌트의 수명은 페이지가 랜더링 되기 전 준비 과정 ~ 페이지가 사라질때까지이다. 컴포넌트를 처음 랜더링 할 때 어떤 작업을 처리하거나, 컴포넌트를 업데이트 하기 전후에 대한 어떤 작업을 처리해야 할 때 라이프 사이클 메서드를 활용한다. ✔ 라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용가능하다. (함수...

Function Component

Hooks (useState, useEffect)

React - Styled Component