react15 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. 0011. Front-end 공부하기2 - 리액트 소개, 리액트 시작하기(Feat. 인프런, 처음 만난 리액트 with 챗GPT) 섹션 1. 리액트 소개 1강 : 리액트는 무엇인가? 정의 : A JavaScript library for building user interfaces. 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 라이브러리 : 자주 사용되는 기능들을 정리해 모아 놓은 것 문자열 관련 기능 숫자 관련 기능 날짜 관련 기능 사용자 인터페이스(User Interface, UI) 사용자와 컴퓨터 프로그램이 상호작용을 하기 위해 중간에서 서로 간의 입력과 출력을 제어해 주는 것 버튼, 텍스트 입력창 등이 모두 UI UI 라이브러리 : 사용자 인터페이스를 만들기 위한 기능 모음집, 화면을 만들기 위한 기능들을 모아 놓은 것. React JS: 대표적인 자바스크립트 UI 라이브러리 - 메타(페이스북)에서 만든 오픈소스 자.. 2023. 12. 6. 0010. Front-end 공부하기1 - 강의선정/준비하기(Feat. 인프런, 처음 만난 리액트(React)) 1. 강의는 인강이다. 사교육에 절어있는 한국인으로서 무언가를 배울 때는 인강이 최고다. 그래서 필자는 인프런이라는 사이트에서 강의를 듣기로 했다. 이 강의를 선택한 이유는 사람들이 많이 수강해서이다. 사람들이 많이 수강한 이유는 무료여서 그렇지 않을까 싶다. 무료임에도 강의 퀄리티가 상당히 좋은 것 같으니 추천하는 편이다. (지금 8.93% 듣고 추천하는 것이다. 판단은 알아서..) 2. 강의 노트 원래 강의를 들으면서 블로그에 차근차근 정리하려고 했는데, 양이 방대해서 그건 어려울 것 같다. 그냥 필자가 공부한 내용을 정리한 것이니 노트처럼 보면 될 것 같다. 사실 내가 보려고 만든거다. 섹션 0. 준비하기 1강 : HTML과 CSS HTML, Hyper Text Markup Language : 웹사.. 2023. 12. 5. 이전 1 2 다음
