소플의 리액트

Node.js(JavaScript runtime) 자바스크립트로 네트워크 어플리케이션 개발 가능npm(node package manager)Node.js를 위한 패키지 매니져다양한 외부패키지의 버전과 의존성관리. 편하게 설치 및 삭제를 도와줌Node.js설치시 자동으로

1)리액트는 무엇인가?공식사이트 정의A JavaScript library for building user interfaces사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리라이브러리 : 자주 사용되는 기능들을 정리해 모아 놓은 것사용자 인터페이스 (User Int

장점 1\. 빠른 업데이트(요청에 따라 화면에 내용이 빠르게 나타나는 것)기존의 웹페이지 변화사용자와 상호작용을 하는 웹페이지의 경우 화면업데이트가 빈번하게 일어난다화면의 업데이트가 빈번하게 일어난다는 뜻은 돔(화면정보)이 수시로 변경된다는 뜻이다돔의 수정은 수정부분을

VSCode @option + shift + a : html에서 범위 주석만들기!오타 조심 바람. 다들 수기로 쳐서 그런지 커뮤니티에 오른 질문의 답이 오타 때문인 경우가 많음!필자도 Mybutton을 Mybotton으로 적음…index.htmlMyButton.jsst

기존 웹사이트에 react를 적용 But, 새로운 웹사이트를 만들때는 처음부터 react가 적용되어있는 상태로 개발 시작 creat-react-app(CRA) 리액트로 웹 어플리케이션 개발에 필요한 모든 설정이 되어있는 상태로 프로젝트를 생성 !버전확인 Node.j

정의 JavaScript(JS) + XML/HTML A syntax extension to JavaScript 자바스크립트의 확장 문법 Ex) const element = Hello, world!-->; Javascript 변수를 선언하고, html태그를 변수값으로

장점가독성이 올라가 버그를 발견하기 쉽다Injection Attacks 방어 : 일반적인 입력데이터(문자,숫자)가 아닌 소스코드 자체를 입력해 해당 코드를 실행시키는 공격변수안에 태그를 집어 넣지만 내소스의 데이터를 {}형태로 넣지만, 해커의 소스는 내소스에서는 선언되

npm start를 하기 위해서는 my-app의 위치로 이동 후에 실행해야 한다.필자는 터미널을 실행하면 react 폴더에서 실행되서 터미널에 cd my-app/ 을 입력해 이동 후에 npm start를 입력했다또한 h1태그 사이에 있는 값은 따옴표(‘)가 아닌 bac

정의어떤 물체를 구성하는 성분Elements are the smallest building blocks of React apps.리액트 앱을 구성하는 가장 작은 블록들DOM(웹의 모든 정보를 가지고 있는 객체)에서 사용하는 용어React Elements / DOM El

2)Elements의 특징불변성(Immutable), 한번 생성된 엘리먼트는 변경 불가Elements 생성후에는 children이나 attributes를 바꿀 수 없다즉, Elements는 다양한 모양으로 존재할 수 있으나 생성후에는 변경 불가하다Elements를 변경

리액트는 Component-Based! \- 레고 블럭 조합하듯 Component 조합하기 \- 자연스레 코드양 줄이기, 개발 및 유지보수에 용이하다리액트는 개념적으로 자바스크립트의 함수와 비슷 \- 입력 -> JavaScript function -> 출력 \-

읽을 수만 있다 -> 값을 변경 할 수 없다즉, props를 전달한 후에 Element를 변경하는 것은 만들고 있던 붕어빵의 속을 가르는 행위이다..!때문에 새로운 값을 컴포넌트에 전달하여 새로 Element를 생성해야 한다'Pure' : \- 입력값(input)을

Class Component(클래스 컴포넌트) \- 초기 사용함, 불편하다는 말이 많았다Function Component(함수 컴포넌트) \- 이후로는 함수 컴포넌트를 수정하여 많이 썼다훅은 함수 컴포넌트를 개선하면서 나오게 된 기술HTML div태그로 인식 Wel

복잡한 화면을 여러 개의 Component로 나눠서 구현 가능!

업로드중..

리액트에서의 State란\- 리액트 Component의 상태 -> 변경 가능한 데이터\- State는 각 개발자가 사전에 직접 정의\- 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함\- 불필요 정보 렌더링 시 성능에 부하state는 JavaScript 객체이

index.js Notification.jsx(1) Notification.jsx(2) NotificationList.jsx(1) NotificationList.jsx(1) !

\- 16.8버전에서부터 나온 기능\- 컴포넌트는 클래스 컴포넌트/ 함수 컴포넌트로 나뉜다class component(클래스) - 생성자-state, setState()업데이트, Lifecycle methods를 제공function component(함수) - stat

Memoized value를 리턴하는 HookuseMemo, useCallback에서 나오는 개념컴퓨터에서는 최적화를 위해서 사용하는 개념비용이 높은, 연산량이 많이 드는 결과를 저장해 두었다가 같은 입력값으로 함수를 호출하면새로 함수를 호출하지 않고 이전에 저장해 두

\- 리액트의 컴포넌트를 말함\- 반복, 조건문, 함수에서 호출하면 안된다Hook은 컴포넌트가 렌더링될 때마다 매번 같은 순서로 호출되어야 한다그래야 리액트가 다수의 usestate hook과 useEffect hook에 호출해서 컴포넌트의 state를 올바르게 관리할

#주석의 설명을 참고 바람

\- 사용자가 버튼을 클릭한 사건(버튼 클릭 이벤트)\- Event Handling : 이벤트를 처리하다DOM의 Event(일반 HTML)React의 Event카멜표기법: 첫글자는 소문자, 중간에 나오는 단어의 첫글자는 대문자.바인드를 해주는 이유는 자바스크립트에서는

#index.js ># #function component ># #class component - bind 코드 ># #class component - Arrow function 코드 ![](https://velog.velcdn.com/images/ycj0720/

\- 조건을 의미한다조건부 랜더링\- 어떠한 조건에 따라서 렌더링이 달라지는 것\- ex)True이면 버튼을 보여주고,         False이면 버튼을 가린다2개의 컴포넌트조건부 적용 후 조건부에 따라 결과를 다르게 리턴을 한다\- 참이나 거짓이 아니지만 참이나 거

Toobar.jsx ># LandingPage.jsx ># index.js

\- Array(배열) : 자료형\- 각자 모두 고유하다\- 객체나 아이템을 구분하는 고유한 값\- 리액트에서는 아이템들을 구분하기 위한 고유한 문자열렌더링 되는 코드의 모습결과 화면

\- 아이템을 분류하기위한 고유한 값\- ex) 주민번호, 학번, 핸드폰 번호, 여권번호...\- ! 특정 범위에서만 고유하면 된다 즉, Key의 값은 같은 List에 있는 Elements사이에서만 고유한 값이면 된다\- A리스트가 갖는 1,2,3,4,5와\- B리스트

#AttendanceBook.jsx ># #index.js

\- ex)로그인, 설문조사, 이벤트 참여...\- 사용자로부터 입력을 받기위해 사용React - component의 state를 통해 데이터를 관리html - element 내부에 각각의 state가 존재한다문제 : 자바스크립트로 입력받은 값의 내부에 접근하기 어렵다

htmljsx\- Drop-down목록을 보여주기 위한 HTML 태그HTML - Selectjsx\- 디바이스의 저장 장치로부터 하나 또는 여러 개의 파일을 선택할 수 있게 해주는 HTML 태그HTML file input 태그\- 읽기 전용 \- 리액트에서는 Uncon

# SingUp.jsx ># # index.js

\- 하나의 데이터를 여러 컴포넌트에서 다뤄야 할때가 많다\- 부모 state를 만들어 각각의 컴포넌트에서 공유하여 사용한다섭씨온도에서 물이 끓는지 안끊는지 코드사용자로부터 온도값을 입력받는 코드입력 컴포넌트 추출하기(재사용성, 별도로 사용)추출당한 Calculator

아직 필자가 완벽하게 리액트를 이해 못했나봄Calculator에서 Temperature를 참조하고 있는데 실행파일을 Temperature로 지정하고 왜 안되지? 이러고 있었음...

\- 여러개의 컴포넌트를 합성하는 것\- 리액트에서는 구성보다는 합성이라는 의미가 맞다!그렇다면여러개의 컴포넌트들을 어떻게 조합할 것인가?\- Contain(담다, 포함하다)의 의미가 더 강하다\- 하위 컴포넌트를 포함하는 형태의 합성 방법\- Sidebar나 Dial

# Card.jsx ># # Ferrari.jsx ># # Lamborghini.jsx ># # index.js ># # localhost:3000 ![](ht

기존에는 컴포넌트의 props를 통해 부모에서 자식으로 단방향 데이터를 전송Context : 컴포넌트 트리를 이용해 곧 바로 데이터를 전송하는 방식즉, props를 통해 계속 원하는 단계까지 보내는 것이 아닌데이터를 Context에 담아두었다가 원하는 단계로 바로 꺼내

\- React.createContext() Context생성만약 상위 레벨에 매칭되는 Provider가 없다면 기본값이 사용됨기본값으로 undefined를 넣으면 기본값이 사용되지 않음\- 하위 컴포넌트들이 데이터를 전달받을 수 있게 하는것

#ThemeContext.jsx ># #MainContent.jsx ># #DarkOrLight.jsx ># #index.js ># 결과화면 ![](https:

\- 스타일링 언어\- 계단식(우선 순위)\- Selector(선택자) : 스타일이 적용되는 규칙Selector(선택자) : h1Property(속성) : color, font-sizeValue(값) : green, 16px;Declaration(선언) : color:

# Layout \- 화면에 Element들을 어떻게 배치할 것인가? * display 속성 * > display : none; \- element를 화면에서 숨기기 위해 사용 \- 태그의 display 속성 기본값은 display:none; display : bl

font와 관련된 대표적인 속성css일반적인 글꼴 분류(대체) : serif, sans-serif, monospace, cursive, fantasysize 단위 : px(pixel)-고정된 값, em-브라우저에 따른 크기, rem, vw(viewport width)1

\- css를 그대로 사용하면서 스타일링 된 컴포넌트로 만들어 주는 오픈소스 라이브러리설치npm install --save styled-components예)\- tagged template literal : 구성요소의 스타일을 지정한다\- literal(고정된 값)\

# index.js > # # Blocks.jsx(1) > # # Blocks.jsx(2) ># # flex-direction : column-reverse

소플의 미니 블로그글 목록 보기 기능(리스트 형태)글 보기 기능댓글 보기 기능글 작성 기능댓글 작성 기능터미널에 npx create-react-app mini-blogreact-router-dom v6styled-components v5npm install --save

글 목록 보기 기능(리스트 형태)\- PostList, PostListItem글 보기 기능\- Post댓글 보기 기능\- CommentList, CommentListItem글 작성 기능\- PostWrite댓글 작성 기능\- CommentWrite폴더 구성하기\- 각

\- 사용자가 입력을 할 수 있게 해주는 컴포넌트\- Bottom up 방식으로 작은 부분부터 구현PostListItem 컴포넌트 만들기PostList 컴포넌트 만들기CommentListItem 컴포넌트 만들기CommentList 컴포넌트 만들기

data.json 파일 만들기소플의 가짜데이터 더미json형태의 데이터

react-router-dom v6라우팅 : 사용자를 원하는 곳으로 보내는것history를 이용해서 브라우저를 탐색하게 하는 것path : 경로element : 경로가 일치할 경우 렌더링할 리엑트 앨리먼트사용자가 새로운 경로를 입력하거나웹사이트 내에서 경로가 이동하게

필자는 오류가 떠서 처음부터 강의를 다시 보면서 다시 작성하니 실행된다...권한을 위해서 sudo를 앞에 써주어야 한다이로써 소플의 리액트 강의를 완강했다!오늘도 페라리를 향해 달린다!

소플의 강의를 듣고 나니더 리액트를 배우고 싶어 새로운 리액트 강의를 찾았고,내가 원했던 스프링과의 연동도 있기에 다음에는을 수강했다