React

node.js 자바스크립트로 네트워크 애플리케이션을 개발할 수 있게 해주는 환경 npm(node package manager) node.js를 위한 패키지 매니저 프로젝트에서 필요로하는 다양한 외부 패키지들의 버전과 의존성을 관리 편하게 설치 및 삭제를 도와줌 node.js를 설치하면 자동으로 설치됨 node 설치 https://nodejs.org/en...

React A JavaScript library for building user interfaces 사용자 인터페이스를 만들기위한 자바스크립트 라이브러리 (화면을 만들기 위한 라이브러리를 모아놓은 것) 라이브러리? 자주 사용되는 기능들을 정리해 모아 놓은 것 프레임워크 vs 라이브러리? 프로그램 흐름에 대한 제어 권한 프레임워크는 흐름의 제어 권한을 개...

create-next없이 연동하는 방법 index.html MyButton.js

npx - execute npm package binaries명령어 입력하면 자동으로 필요한 것들 설치됨으로 이동한다음으로 애플리케이션 실행하면localhost:3000으로 접속이 된다.

JSX A syntax extention to JavaScript 자바스크립트 확장 문법으로 JavaScript + XML / HTML 리액트에서 JSX를 쓰는 것이 필수는 아님! JSX를 사용하면 createElement를 사용하지 않아도 된다. but 코드가 간결해지고 생산성과 가독성이 올라간다 JSX의 장점 간결한 코드 가독성 향상 -> 유지보...

Element 어떤 물체를 구성하는 성분 Elements are the smallest building blocks of React apps 리액트 앱을 구성하는 가장 작은 블록들 DOM Element 화면에 나타나는 내용을 기술하는 자바스크립트 객체 React Element는 DOM Element의 가상표현 DOM Element는 React Elem...

React로 간단한 시계를 만들기 위해 아래와 같이 작성하고 Clock.jsx index.js indes.js를 이렇게 바꿔주니 화면에 아무 것도 나타나지 않았다...?? 콘솔을 열어보니 > Uncaught TypeError: reactdomclientWEBPA

Components React는 레고 블록 조립하듯 컴포넌트들을 모아서 개발 컴포넌트를 모아 또 다른 컴포넌트를 만듦 -> 하나의 컴포넌트를 반복적으로 사용하여 전체 코드양 감소, 개발시간 감소, 유지보수비용 감소 자바스크립트의 함수와 React Component의 함수는 입력과 출력이 있다는 점에서는 동일하다. 그러나 React Component의 입...

Function component 코드가 간단함 Class Component React.Component 상속 받아서 만듦 Component 만들때 주의할 점 Component이름은 항상 대분자로 시작해야한다!(소문자로 시작하는 것은 DOM으로 인식) Component 렌더링 -> Welcome 컴포넌트에 {name:'수리'}라는 값을 넣어서 호...

state 리액트 컴포넌트의 변경 가능한 데이터 state는 개발자가 정의한다 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함 시켜야 함 -> 불필요한 것 렌더링되어 성능 떨어짐 state는 자바스크립트 객체이다. class 컴포넌트는 state를 생성자에서 정의 함수형 컴포넌트는 useState라는 hook을 사용해서 정의 state는 ...

Hook의 규칙 Hook은 무조건 최상위 레벨에서만 호출해야한다. -> Hook은 컴포넌트가 렌더링 될때마다 매번 같은 순서로 호출되어야 한다. 리액트 함수 컴포넌트에서만 Hook을 호출해야한다. > 참고 : eslint-plugin-react-hooks 훅의 규칙을 따르도록 해주는 도구 custom Hook 만들기 여러 컴포넌트에서 사용되는 로직을 재...

Conditional Rendering 조건부 랜더링 어떠한 조건(true or false)이냐에 따라서 랜더링이 달라지는 것 -> 로그인 한 사람과 하지 않은 사람에게 다른 화면을 보여주는 것 Truthy / falsy Truthy : true는 아니지만 true로 여겨지는 값 falsy : false는 아니지만 false로 여겨지는 값 Elemen...

List array 사용 Key 각 객체나 아이템을 구분할 수 있는 고유한 값 아이템들을 구분하기 위한 고유한 문자열 여러개의 Component 렌더링하기 map함수 사용하기 map 함수를 사용하면 아래와 같은 경고 문구가 콘솔에 뜰 수도 있는데 각 아이템에 고유한 Key가 없기 떄문이다. -> key의 값은 같은 list에 있는 element사이에...

Form 사용자로부터 입력을 받기 위해 사용 Textarea Tag 여러줄에 걸체 긴 텍스트를 입력받기위한 HTML 태그 select Tag 드롭다운 여러개의 옵션 선택 ![](https://velog.velcdn.com/images/owlsuri/post/df3c4f6d-caaa-4c8f-9128-295a06a73607/image.p

Context 기존의 리액트 어플리케이션에서는 컴포넌트의 props를 통한 데이터 전달(단반향) -> 코드도 복잡해지고 사용하기 불편함 Context는 컴포넌트 트리를 통해 곧바로 데이터를 전달 기존방식 context 방식 -> 여러개의 컴포넌트들이 접근해야하는 데이터(로그인여부, UI테마 등) 주의할점 conponenet와 co

프로젝트 생성 프로젝트에 필요한 패키지 설치 router, styled-component 컴포넌트 구성 필요한 기능 글목록 리스트 : PostList, PostListItem 글 보기 : Post 댓글 보기 : CommentList, CommentListItem 글

styled-components 설치 or 사용 기본 사용법 tagged template literal 백틱으로 둘러싸인 부분에 css 속성 넣어주기 styled-components의 props 사용하기 styled-components의 스타일 확장하기 ->

CSS Cascading Style Sheets 스타일링을 위한 일종의 언어 selector : 스타일을 어떤 엘리먼트에 적용할지를 선택 element selector ID Selector class selector ![](https://velog.velcdn.c

프론트엔드 공부를 하다보면 서버, api는 필요한데 어떻게 해야하는지... 백엔드를 공부해야하는지 싶을때 쓸 수 있는 서버 만드는 방법! 기본 설정 src/db에 data.json이라는 파일을 만들고 json형태의 데이터를 넣어둔다. 설치 vsc 터미널에 설정 json-server --watch ./src/db/data.json --port 300...

root에서만 header를 숨기고 싶어서 검색했더니 이렇게 조건을 넣어주면 된다고 해서 해봤더니... 모든 페이지에서 헤더를 볼 수 없었다🙄 원인 모든 경로에 "/" 이것이 들어가기 때문. 특정 경로 예를들면 "/login"은 가능하겠지만 root는 Route애서도 exact path를 써줘야 한다. 해결 useLocation hook 사용! us...