codeStates front-end/React
-
[React] 이벤트 처리 & Controlled Component & React 데이터 흐름codeStates front-end/React 2023. 1. 26. 14:08
📌리액트 개념 📍이벤트 처리( Event handling ) React 에서 이벤트는 소문자 대신 카멜 케이스를 사용 JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수를 전달 Event // html Event // react 🔗 onChange 폼(Form) 엘리먼트 () 는 입력값을 제어하는 데 사용 변경될 수 있는 입력값 -> 컴포넌트의 state로 관리 function NameForm() { const [name, setName] = useState(""); const handleChange = (e) => { setName(e.target.value); // onChange 이벤트가 발생하면 e.target.value를 통해 input 값을 읽어옴 } return ( {/* input태그..
-
[React] State & Props & 렌더링 정의codeStates front-end/React 2023. 1. 25. 23:11
📌리액트 개념 📍State & Props State : 살면서 변할 수 있는 값(상태) 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값 Props : 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값 ex) 어떤것이 Props 또는 State에 적합할까? 이름 성별 나이 현재 사는 곳 취업 여부 결혼/연애 여부 정답 : Props - 이름, 성별 State - 성별, 나이, 이름, 현재 사는 곳, 취업 여부, 결혼/연애 여부 props의 특징 컴포넌트 속성(property) 웹어플리케이션에서 해당 컴포넌트가 가진 속성에 해당 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값 객체 형태 읽기 전용이다 -> 함부로 변경될 수..
-
[React] 실습 - react twittler SPAcodeStates front-end/React 2023. 1. 25. 20:25
📌 react twittler SPA 📖 학습 목표 React Router 설치 react-router-dom 을 npm으로 설치해야 합니다. 상세 컴포넌트 구현하기 App 루트 컴포넌트(App.js) import 를 이용하여 Tweets, MyPage, About 컴포넌트를 불러옵니다. Sidebar 메뉴 컴포넌트(Sidebar.js) Font Awesome을 활용하여 About 아이콘 을 넣어야 합니다. Font Awesome을 활용하여 MyPage 아이콘 을 넣어야 합니다. Tweets 컴포넌트(Tweets.js) import 를 이용하여 Footer 컴포넌트를 연결합니다. dummyTweets의 길이만큼 트윗이 보여야 합니다 MyPage 컴포넌트(MyPage.js) import 를 이용하여 Foo..
-
[React] SPA, RoutercodeStates front-end/React 2023. 1. 25. 15:56
📌리액트 개념 📍SPA( Single-Page Application ) 서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지에 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통하는 웹 어플리케이션이나 웹 사이트 전통적인 웹사이트 - 페이지를 이동 시 "페이지 전체"를 불러와야함 SPA - 페이지 이동 시 중복 되는 부분은 불러 오지 x 중복 되는 헤더, 푸터는 냅두고, 컨텐트만 바꾼다는 뜻 SPA 장점 페이지 전체를 런데링 하는 것이 아니므로 사용자의 행동에 빠르게 반응 SPA 단점 첫 화면의 로딩 시간이 길어짐 검색 엔진(자료를 수집하기 좋도록 웹 페이지를 구성하는 것) 최적화가 좋지 않음 🧷 Wireframe과 Mockup Wireframe - 웹페이지의..
-
[React] 실습 - react twittlercodeStates front-end/React 2023. 1. 20. 15:57
📌 react twittler 📖 학습 목표 상세 컴포넌트 구현하기 Sidebar 컴포넌트 기술 요구사항 App 컴포넌트의 후손 컴포넌트로 Sidebar 컴포넌트가 있어야 합니다. Font Awesome을 활용하여 트윗 메시지 아이콘이 있어야 합니다. (className : "far fa-comment-dots"). 튜토리얼1을 먼저 학습하고 진행해보세요. Counter 컴포넌트 기술 요구사항 Feature 컴포넌트의 후손 컴포넌트로 Counter 컴포넌트가 있어야 합니다. dummyTweet로 전달되는 트윗 개수와 카운트가 일치해야 합니다. ex) total : 5 total과 숫자가 콘텐츠에 포함되어 있어야 합니다. Footer 컴포넌트 기술 요구사항 Features 컴포넌트의 후손 컴포넌트로 Foo..
-
[React] JSX, ComponentcodeStates front-end/React 2023. 1. 20. 15:16
📌리액트 기초 개념 📍JSX JavaScript를 확장한 문법 React에서는 DOM과는 다르게 css,jsx 문법만을 가지고 웹 애플리케이션을 개발할 수 있다. DOM에서 JS와 함께 사용하기 위해서는 js와 html을 연결하기 위한 작업이 필요 Inline 방식이나 script 태그를 이용해 외부 js 파일을 연결 가능 🔖 jsx를 써야하는 이유 명시적 코드 작성 : js 문법과 html 문법을 동시에 이용해 기능 구조를 한눈에 확인 가능 코드단순화, 가독성 import React from "react"; import "./styles.css"; function App() { const user = { firstName: "React", lastName: "JSX Activity" }; functio..