본문 바로가기

부트캠프교육중/react80

Side Effect # side effect(부수효과) -함수내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우(함수 내부에서 외부의 값에 관여하는 경우) -순수 함수의 출력값에 영향을 미치는 작업들 -컴포넌트내에서 fetch를 사용해 api정보를 가져오거나 이벤트를 활용해 DOM직접 조각할때 # pure function(순수함수) -오직 함수의 입력만이 함수의 결과에 영향을 주는 함수(다른 값이 함수의 결과에 영향을 미치는 경우 안된다.) -입력으로 전달된 값을 수정하지 않는다. -side effect가 없다. -어떠한 전달인자가 주어질 경우, 항상 똑같은 값이 리턴됨을 보장한다. 그래서 예측가능한 함수이다 #react컴포넌트에서의 side Effect -타이머 사용(setTimeout) -데이터가져오기(fetch API.. 2023. 2. 2.
상태끌어올리기 # react 개발방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이다. 먼저 컴포넌트를 만들고, 다시 페이지를 조립해나간다. 즉 상향식으로 앱을 만든다. #데이터는 위에서 아래로 흐른다. 데이터를 전달하는 주체는 부모 컴포넌트가 된다. -단방향 데이터 흐름(one-way data flow) # 두개의 자식 컴포넌트가 하나의 상태에 접근하고자 할때는 두 자식의 공통 부모 컴포넌트에 상태를 위치해야한다. # 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀐다. 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다. 이게 상태 끌어올리기이다. function ParentComponent() { const .. 2023. 2. 2.
react 데이터흐름 # react의 개발방식의 가장 큰특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이다!! #상향식(bottom-up)으로 앱을 만든다 -먼저 컴포넌트를 만들고, 다시 페이지를 조립해나간다 -상향식의 가장 큰 장점은 테스트가 쉽고 확장성이 좋다. -그래서 앱의 디자인을 전달받고나면, 컴포넌트 계층구조로 나누는 것이 가장 먼저 해야할일이다! #데이터를 전달하는 주체는 부모컴포넌트가 된다. 이는 데이터 흐름이 하향식(top-down)임을 의미한다. 데이터는 위에서 아래로 흐른다. 리액트는 단방향 데이터 흐름(one way data flow)을 따른다. #state는 최소화하는 것이 가장 좋다. state가 많아질수록 애플리케이션은 복잡해진다. #이러면 state가 아니다 -부모로부터 props를 통.. 2023. 1. 26.
controlled Component 리액트가 state를 통제할수있는 컴포넌트를 controlled Component라고한다. 트윗은 받는 사람 정해져있다 보내는 사람은 변경될수있다 내용도 변경될수있는 값 상태가 된다. react가 state를 통제하는방법 => input에 값입력시, state도 그때그때 바뀌면(onchange)된다. 그리고 이 변경된 state와 input의 value 또한 같게 작성해야한다. import "./styles.css"; import React, { useState } from "react"; export default function App() { const [username, setUsername] = useState(""); const [msg, setMsg] = useState(""); return .. 2023. 1. 26.

티스토리툴바