본문 바로가기

처음만난리액트10

0025. Front-end 공부하기16 - Project 실습, 미니 블로그 만들기 섹션 16. Mini Projects 1강. (실습) 미니 블로그 기획, 프로젝트 생성 및 필요한 패키지 설치 소스코드 모음 https://github.com/soaple/mini-blog GitHub - soaple/mini-blog: 소플의 처음 만난 리액트 실습 프로젝트 소플의 처음 만난 리액트 실습 프로젝트. Contribute to soaple/mini-blog development by creating an account on GitHub. github.com 프로젝트 : 미니 블로그 기획하기 개발을 시작하기 전에 정해야 할 것들 항상 어떤 제품을 개발하기 전에는 기획과 필요한 기능, 전체 디자인에 대해서 간단하게나마 정리 필요 미니 블로그에 필요한 기능 글 목록 보기 기능(리스트 형태) 글 .. 2023. 12. 27.
0024. Front-end 공부하기15 - styling(2) - Font, Color, Border, styled-components 섹션 15. Styling 3강. Font와 관련된 CSS속성, 기타 많이 사용하는 CSS 속성 1. Font와 관련된 속성 font-family 어떤 글꼴을 사용할 것인지를 결정하는 속성 사용할 글꼴의 이름을 적어주면 됨 - 글꼴의 이름에 띄어쓰기가 들어갈 경우, ""로 묶어줘야 함 사용할 글꼴이 콤마로 구분되어 여러 개의 글꼴이 쓰여 있음 font-family 속성의 fall-back 시스템 때문임. (fall-back : 시스템 문제 발생 시 이전의 안정된 상태나 설정으로 돌아가는 기능) 지정한 글꼴을 찾지 못했을 경우 대비하여 사용할 글꼴을 순서대로 지정 최대한 많은 브라우저와 운영체제에서 글자가 깨지지 않고 나올 수 있도록 하기 위함 fall back 시스템의 가장 마지막에 쓰여 있는 것은 일반.. 2023. 12. 27.
0023. Front-end 공부하기14 - Styling(1) : CSS, selector, layout, flexbox 섹션 15. Styling 1강. CSS와 selector 스타일링은 웹사이트 전체 레이아웃 구성을 포함하여 버튼의 색깔, 테두리, 폰트의 크기, 색상 등을 모두 포함하는 개념 1) CSS, Cascading Style Sheets 스타일링을 위한 일종의 언어 Cascading : 계단식, 하나의 엘리먼트가 여러 개의 스타일 규칙을 만족할 경우에 해당 스타일들을 마치 계단을 한 칸씩 내려가는 것처럼 우선순위를 가지고 적용되게 만듦 - 결과적으로, 하나의 스타일이 여러 개의 엘리먼트에 적용될 수 있고, 하나의 엘리먼트에도 여러 개의 스타일이 적용될 수 있음 셀렉터와 실제 스타일로 이뤄져 있음 2) Selcector 엘리먼트에 스타일이 적용되는 규칙 선택자 : 스타일을 어떤 엘리먼트에 적용할지를 선택하게 해.. 2023. 12. 27.
0022. Front-end 공부하기13 - Context 섹션 14. Context 1강. Context란? 기존의 일반적인 React 애플리케이션에서는 데이터가 컴포넌트의 props를 통해 부모에서 자식으로 단방향 전달 컨텍스트 : 리액트 컴포넌트들 사이에서 데이터를 기존에 props를 통해 전달하는 방식 대신 컴포넌트 트리를 통해 곧바로 컴포넌트로 전달하는 새로운 방식 이 방식의 단점은 단방향으로 전달되기 때문에 반복되는 코드가 많아지고 복잡해진다는 것임 예를 들어, Root에서 10단계 밑에 있는 자식으로 전달하려면 props를 통해 10번 내려가야 되는 것임 이 불편함을 개선하기 위해 등장한 것이 바로 context 코드도 매우 깔끔해지고, 데이터를 한 곳에서 관리하기 때문에 디버깅을 하기에도 굉장히 편리함 1) 언제 Context를 사용해야 할까? 여.. 2023. 12. 26.
0021. Front-end 공부하기12 - Composition vs Inheritance 섹션 13. Composition vs Inheritance 1강. Composition 방법과 Inheritance 1) Composition Composition : 합성 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 여러 개의 컴포넌트들을 어떻게 조합할 것인가? 합성 방법은 여러 개가 있다. (1) Containment : 담다, 포함하다 하위 컴포넌트를 포함하는 형태의 합성 방법 Sidebar나 Dialog 같은 Box 형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다. 사용 방법 : children이라는 prop을 사용해서 조합! children은 React에서 직접 넣어주는 것 React에서는 하위 컴포넌트를 props.children으로 하나로 모아서 제공함 여러 개의 c.. 2023. 12. 25.
0020. Front-end 공부하기11 - Lifting State Up (Feat. 대체 props와 state의 차이는 뭐였더라??) 섹션 12. Lifting State up 1강. Shared State Shared State 리액트로 개발하다 보면, 하나의 데이터를 여러 개의 컴포넌트에서 표현해야 하는 경우가 발생함 각 컴포넌트의 스테이트에서 데이터를 각각 보관하는 것이 아니라, 가장 가까운 부모 컴포넌트에의 스테이트를 공유해서 사용하는 것이 효율적 자식 컴포넌트들이 가장 가까운 공통된 부모 컴포넌트의 스테이트를 공유해서 사용하는 것 State에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우를 말함 하위 컴포넌트가 공통된 부모 컴포넌트의 state를 공유하여 사용하는 것 2강. 하위 컴포넌트에서 state 공유하기 물의 끓음 여부를 알려주는 컴포넌트 Calculator 컴포넌트 안에 온도를 입력하는 부분을 별.. 2023. 12. 25.
0019. Front-end 공부하기10 - Forms, Controlled Component, Textarea, Select, File input, Multiple inputs, Input null value 섹션 11. Forms 1강. Form과 Controlled Component 1) Form 사용자로부터 입력을 받기 위해 사용 리액트와 HTML이 차이가 있음 리액트 폼 : 컴포넌트 내부에서 state를 통해 데이터를 관리 HTML 폼 : 엘리먼트 내부에 각각의 state가 존재(접근하기 쉽지 않음) 2) Controlled Component 사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트 값이 리액트의 통제를 받는 Input Form Element를 의미함 우측은 클래스 컴포넌트를 기준으로 그린 것인데, 함수 컴포넌트에서는 useState 훅을 사용하여 state를 관리 컨트롤드 컴포넌트는 리액트에서 모든 값을 통제할 수 있는 구조를 가지고 있음 컨트롤드 컴포넌트를 사용하면 사용자의 .. 2023. 12. 23.
0018. Front-end 공부하기9 - Lists and Keys, 여러 개의 컴포넌트 렌더링하기 섹션 10. List and Keys 1강. List와 Key List : 목록 같은 아이템을 순서대로 모아 놓은 것 Array : 배열 JavaScript의 변수나 객체들을 하나의 변수로 묶어 놓은 것 Key 열쇠는 모양이 다 다르다(고유하다). 각 객체나 아이템을 구분할 수 있는 고유한 값 아이템들을 구분하기 위한 고유한 문자열 2강. 여러 개의 Component 렌더링 하기 배열과 키를 사용하여 반복되는 여러 개의 컴포넌트들을 쉽게 렌더링 - 반복되는 다수의 엘리먼트가 렌더링 되는 것 map() mapping, 한쪽에 있는 아이템과 다른 한쪽에 있는 아이템을 짝지어 준다는 의미 배열에 들어있는 각 변수에 어떤 처리를 한 뒤 리턴하는 것 배열의 첫번째 아이템부터 순서대로 각 아이템의 어떠한 연산을 수.. 2023. 12. 23.
0017. Front-end 공부하기8 - Conditional Rendering(조건부 렌더링) 섹션 9. Conditional Rendering 1강. Conditional Rendering의 정의와 Inline Conditions 1) Conditional Rendering : 조건에 따른 렌더링, 조건부 렌더링 어떠한 조건에 따라서 렌더링이 달라지는 것 조건 : 프로그래밍에서 사용하는 조건문 조건문의 결과는 TURE 아니면 FALSE가 나오는데 이 결과에 따라서 렌더링을 다르게 하는 것 ex. TRUE : 버튼을 보여준다. FALSE : 버튼을 가린다. Greeting 컴포넌트는 isLoggedIn이라는 변수의 값이 True에 해당되는 값이면 UserGreeting 컴포넌트를 return 하고, 그렇지 않으면 GuestGreeting 컴포넌트를 리턴하는 컴포넌트 props로 들어오는 isLog.. 2023. 12. 22.
0015. Front-end 공부하기6 - Hooks (Feat. 처음 만난 리액트) 섹션 7. Hooks 1강. Hooks의 개념과 useState, useEffect Hooks 리액트 컴포넌트 : Function Component, Class Component Function Component Class Component - state 사용 불가 - Lifecycle에 따른 기능 구현 불가 - Hooks - 생성자에서 state를 정의 - setState() 함수를 통해 state 업데이트 - Lifecycle methods 제공 ※ state를 이용해서 렌더링에 필요한 데이터를 관리함 클래스 컴포넌트에서는 생성자, 컨스트럭터에서 state를 정의하고 setState 함수를 통해 state를 업데이트 class 컴포넌트는 state와 관련된 기능뿐만 아니라 컴포넌트의 생명 주기 함수들.. 2023. 12. 22.

티스토리툴바