React Native27 0016. Front-end 공부하기7 - Handling Events 섹션 8. Handling Events 1강. Event의 정의 및 Event 다루기 Event : 사건, 특정 사건을 의미함 이벤트를 처리한다 = 이벤트를 Handling 한다 버튼이 눌리면 Activate 함수를 호출함 DOM과 다른 점 DOM(onclick) vs React(onClick) : camel case. 이름 표기법이 다르다. DOM : 이벤트를 처리할 함수를 문자열로 전달 리액트 : 함수 그대로 전달 Camel Case : 카멜 표기법 낙타의 등의 모양을 보고 이름을 지은 것 글자의 굴곡이 낙타의 등과 같다고 해서 지어진 이름 예시 : onClick Event Handler 사건이 발생하면 사건을 처리하는 역할 Event Listener라고 부르기도 함 이벤트 핸들러 함수인 handle.. 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. 0014. Front-end 공부하기5 - State and Lifecycle(★중요★), React Developer Tools 섹션 6. State and Lifecycle 1강. State와 Lifecycle의 정의 State는 리액트의 핵심 개념, 완벽하게 이해될 때까지 들을 것 1) State State : 상태 = 리액트 Component의 상태 = 리액트 Component의 데이터 = 리액트 Component의 변경 가능한 데이터 개발자가 정의한다. 주의점! : 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함! 관련 없는 값까지 state에 포함시키면 불필요한 경우에 컴포넌트가 다시 렌더링 되어 성능을 저하시킬 수 있음 state는 따로 복잡한 형태가 있는 것이 아니라 그냥 하나의 JavaScript 객체이다. 이렇게 정의된 state는 정의 이후 일반적인 JavaScript 변수를 다루듯이 직접 수정.. 2023. 12. 15. 0013. Front-end 공부하기4 - Component와 props (☆★굉장히 중요★☆) 섹션 5. Components and Props (★☆굉장히 중요☆★) 1강 : Components와 Props의 정의 1. Component React Component는 개념적으로는 자바스크립트의 함수와 비슷 입력(Parameter) → JavaScript Function → 출력 입력(Props) → React Component → 출력 - 실제로는 : Props → React Component → React element(리액트 앱을 구성하는 가장 작은 블록) - 어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴 붕어빵 틀을 갖고 있다면 계속해서 붕어빵을 만들 수 있는 것처럼, 컴포넌트가 있다면 엘리먼트를 계속해서 만들어낼 수 있다. 2. Props(Prop이 여러 개) .. 2023. 12. 13. 0012. Front-end 공부하기3 - JSX, Element, 시계만들기(Feat. 인프런, 처음 만난 리액트) 섹션 3. JSX 1강 : JSX의 정의와 역할 개념 : A syntax extension to JavaScript, 자바스크립트 확장 문법 문법을 확장시킨 방법 : JavaScript + XML/HTML JS : JavaScript 자바스크립트 관련 라이브러리도 이름 뒤에 JS가 붙어서 자바스크립트 라이브러리라는 것을 나타 리액트 풀네임 : ReactJS JSX의 역할 : JSX는 내부적으로 XML, HTML 코드를 JavaScript로 변환하는 과정을 거침. 그래서 JSX로 작성해도 최종적으로 JavaScript 코드가 나오게 됨. 여기서 JSX를 JS로 바꾸는 함수가 React의 creatElement 함수임. 그래서 리액트에서 JSX를 쓰는 것이 필수는 아님. 모든 코드를 creatElement .. 2023. 12. 12. 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 3 다음
