DDOstory

15. 리액트 styled-components🤯 리액트 styled-components 설치명령어를 통하여 최신 버전의 리액트 style-components 설치# npm을 사용하는 경우npm install --save styled-components# yarn응ㄹ 사용하는 경우yarn add styled-components스타일이 잘 적용되었다면 회색 배경에 흰색 글씨로 안녕 리액트라는 문자열을 출력하는 컴포넌트가 잘 작동하면 이러한 화면이 등장리액트 styled-components의 MainPage.jsx 파일을 생성하여 코드를 작성한 후 꼭 index.js 파일에서 Mainpage를 import 해주어야 npm 실행 명령어인 npm start 작성시 실행 가능🤯 리액트 styled-compone..

React 리액트 스타일링🍿 CSS웹 개발을 할 때 스타일링을 하기 위해 가장 대표적으로 사용하는 것Cascading Style Sheets스타일링을 위한 일종의 언어여러가지 스타일이 정의되어 있고 각 스타일은 해당 스타일이 적용되는 규칙을 갖고 있음하나의 엘리먼트가 여러 개의 스타일 규칙을 만족할 경우에는 해당 스타일들을 우선순위를 가지고 하나씩 적용하게 됨하나의 스타일이 여러 개의 엘리먼트에 적용될 수 있고, 하나의 엘리먼트에도 여러 개의 스타일이 적용될 수 있음🍿 CSS 기본 구조Selector를 먼저 쓰고 이후에 적용할 스타일을 중괄호 안에 세미콜론으로 구분하여 하니씩 기술Selector에는 해당 스타일이 적용될 HTML 엘리먼트를 넣게 됨HTML 태그를 직접 넣거나 다른 조건들을 조합하여 셀..

React 리액트 테마 변경 기능메인 컨텐츠 컨포넌트는 씸 컨텍스트로부터 현재 설정된 테마 값을 받아와 실제 화면의 컨텐츠를 렌더링하는 역할테마 변경 버튼을 누를 경우 씸 컨텍스트로부터 받은 roggleTheme함수를 호출하여 씸 컨텍스트의 값을 변경하는 역할도 함Theme 컨텍스트의 값을 가져오기 위해 Theme 컨텍스트.consumer 컴포넌트를 사용하는 방법 대신에 use-context-hook를 사용darkOrlight 컴포넌트는 방금 전에 만든 메인 컨텐츠 컴포넌트를 자식으로 갖고 있는데 이는 ThemeContext.Provider로 감싸서 theme-context의 값을 하위 컴포넌트들이 사용할 수 있도록 해줌SimContext.Provider로 감싸주지 않으면 하위 컴포넌트들이 SimCont..

[React] Card 컴포넌트 제작카드 컴포넌트는 하위 컴포넌트를 감싸서 카드 형태를 보여주는 컴포넌트두 가지 합성 방법을 모두 사용하여 구현children을 사용한 부분이 containment 이고 title과 background를 사용한 부분이 specialization이라고 할 수 있음카드 컴포넌트는 범용적으로 재사용이 가능한 컴포넌트프로필 카드 컴포넌트는 카드 컴포넌트를 사용하여 타이틀에 이름을 넣고 배경 색상을 녹색으로 설정children으로는 간단한 소개 글을 넣었음카드 컴포넌트가 사용자의 프로필을 나타내는 프로필 카드 컴포넌트가 됨배경색이나 타이틀 그리고 내부에 들어가는 컨텐츠들을 바꿔 보면서 다양한 카드를 만들어보는 것이 좋음 복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 만들고, 만든 ..

[React] 섭씨 온도와 화씨 온도 표시하기재사용이 가능한 형태로 컴포넌트를 만들어 사용하는 것이 효율적BoilingVerdict 문장은 섭씨온도의 값을 props로 받아서 100도씨 이상이면 물이 끓는다는 문자열을 출력하고 외에는 물이 끓지 않는다는 문자열을 출력Calculator라는 컴포넌트는 State로 온도값을 하나 갖고 있고 사용자로부터 입력을 받기 위해 input 태그를 사용하여 ControlledComponent 형태로 구현사용자가 온도를 변경할 때마다 handleChange 함수 호출SetTemperature함수를 통해 온도값을 갖고 있는 Temperature라는 이름의 State를 업데이트State에 있는 온도 값은 앞에서 만든 BoilingVerdict 컴포넌트에 celsius라는 이..

[React] 사용자 정보 입력 받기signup 컴포넌트는 이름을 입력할 수 있는 input 태그와 입력된 값을 저장하기 위한 name이라는 state를 가지고 있음select 태그에는 총 두가지 옵션이 들어가 있는데 select 태그의 값이 변경되면 처리하기 위해 handleChangeGender라는 이벤트 핸들러를 만들어서 사용 📲 Form사용자가 무언가를 선택을 해야 하는 것사용자로부터 입력을 받기 위해 사용// HTML Form 이름: 제출리액트에서도 잘 작동하지만 자바스크립트 코드를 통해 사용자가 입력한 갑에 접근하기에는 불편한 구조자바스크립트 코드에서 사용자가 입력한 값에 접근하고 제어할 수 있어야 웹페이지를 개발할 때 더 편리📲 Controlled Co..

map 함수를 사용해서 리스트를 렌더링 했는데 각 엘리먼트에 키가 빠져 오류가 나는 상황화면에 각 학생 객체의 고유한 값을 가진 아이디를 추가map 함수의 엘리먼트에 아이디를 값으로 해서 키를 넣어줌key를 포맷팅 된 문자열을 key로 사용할 수도 있고 인덱스를 키로 사용할 수도 있음AttendanceBook 컴포넌트는 student라는 배열로부터 학생 정보가 담긴 객체를 받아 학생들의 이름을 목록 형태로 출력하는 컴포넌트배열을 렌더링 하기 위해 map() 함수 사용 🎖️ List같은 아이템을 순서대로 모아놓은 것이 리스트에 해당리스트를 위해 사용하는 자료구조는 배열 (Array)배열은 JavaScript의 변수나 객체를 하나의 변수로 묶어 놓은 것을 의미const numbers = [1, 2, 3, ..

Toolbar 컴포넌트는 사용자의 로그인 여부를 나타내는 isLoggedin이라는 값을 props로 받아서 조건부 렌더링을 사용하여 환영 메시지를 표시하거나 감추고 로그인 로그아웃 버튼을 보여주는 역할을 함엔드 연산자와 삼향 연산자를 사용하여 각각 inline-if와 inline-if-else 조건부 렌더링을 구현랜딩페이지 컴포넌트는 useStateHook을 사용하여 사용자의 로그인 여부를 자체적으로 관리툴바 컴포넌트에 값을 전달하여 로그인 여부에 따라 툴바에 적절한 사용자 인터페이스가 표시되도록 함💎 Conditional Rendering리액트로 개발할 때 자주 사용하게 되는 기능조건에 따른 렌더링 (= 조건부 렌더링)어떠한 조건에 따라서 렌더링이 달라지는 것을 의미조건문의 결과는 true 또는 fa..

ConfirmButton 컴포넌트는 확인 여부를 저장하기 위해 state의 isComfirmed라는 변수를 가지고 있고 초기값은 false임버튼의 onclick 이벤트를 처리하기 위해 이벤트 핸들러로 handleComfirmed라는 함수를 만듬bind를 사용하는 방식으로 이벤트 핸들러를 처리확인 버튼을 누르면 클릭 이벤트가 이벤트 핸들러로 전달되고 isComfirmed의 값이 true로 변경되면서 버튼이 비활성화바인트 코드 제거arrow function을 사용하기 위해 이벤트 핸들러 수정이전과 동일한 결과가 나옴state는 useStateHook을 사용하여 처리eventHandler는 arrow function을 사용하여 만듬 🥰 Events특정 사건을 의미사용자가 버튼을 클릭하는 사건도 하나의 이벤트..

notification 컴포넌트는 state에 아무런 값을 가지고 있지 않음 생성자에서는 앞으로 사용할 데이터를 state에 넣어서 초기화 클래스 컴포넌트에서 state를 업데이트 하려면 반드시 setState 함수 사용키는 리액트 엘리먼트를 구분하기 위한 고유의 값맵 함수를 사용할 때에는 필수적으로 들어가야 함❤️ state리액트 Component의 상태를 의미리액트 Component의 데이터라는 의미에 더 가까움리액트 Component의 변경 가능한 데이터미리 정해진 것이 아니라 리액트 Component를 개발하는 각 개발자가 직접 정의하여 사용렌더링이나 데이터 흐름에 사용되는 값만 state에 포함하여야 함state가 변경될 경우 Component가 재렌더링되기 때문에 렌더링과 데이터 흐름에 관련 ..