data life

⭐useEffect()⭐ 함수 컴포넌트 내에서 side effects를 수행하도록 해준다. export default function MyComponent() { useEffect(() => { // Code here will run after *every* render }, []); return ; } 즉, 컴포넌트가 렌더링될 때마다 React는 화면을 업데이트한 다음 내부의 코드를 실행한다. 이때, 두 가지 인자를 받는데 ✅빈배열을 넣을 경우, componentDidMount 처럼 동작하게 된다. ✅빈배열을 넣지 않을 경우, componentDidMount + componentDidUpdate 처럼 동작한다. export default function MyComponent(props) { const ..

컴포넌트가 처음으로 렌더링 될 때, DOM에 mount 컴포넌트가 DOM에서 빠졌을 때, unmount ❓생명주기를 왜 알아야하죠? 최근에는 함수 컴포넌트를 사용하고 있지만 리액트 초기엔 클래스 컴포넌트를 많이 이용하였다. 클래스 컴포넌트는 기본적으로 생명주기에 따라 메서드를 제어할 수 있게 되어있고 함수 컴포넌트는 따로 hook() 함수를 이용해 컴포넌트의 mount, unmount 되는 시점에 맞춰 제어가 가능하다. 클래스 컴포넌트를 이해하기 위해서는 생명주기를 알아야한다. 그렇다면, 먼저 함수 컴포넌트와 클래스 컴포넌트를 비교해보자. export default function Clock(){ const [date, setDate] = useState(new Date()); return( Hello!..

state 끌어올리기 function A(){ return( ); } 위와 같은 구조의 컴포넌트들이 존재한다고 가정해보자. 만일 C컴포넌트에서 B컴포넌트가 가진 state가 필요하다 할 때의 상황이라면 어떻게 하는 것이 좋은가? B컴포넌트와 C컴포넌트가 가지고 있는 state를 A컴포넌트로 끌어올려 사용하면 편리하지 않을까? 이때, 바로 props를 이용하여 state를 주고받을 수 있다. 섭씨 기준 100도 이상 또는 화씨 기준 212 이상이면 끓는 물, 아니면 끓지 않는 물이라는 메세지를 보여주도록 구현한 화면이다. 이때, 섭씨와 화씨는 서로 다른 state를 갖도록 구현하도록 함. 동일한 기능은 다음과 같다. input에 숫자 입력 특정 기준치에 이상이면 끓는 물, 아니면 끓지 않는 물이라는 메세지..

state 업데이트는 비동기적일 수 있다. export default function App() { const [number, setNumber] = useState(1); const add = () => setNumber(number + 1); const subtract = () => setNumber(number - 1); const multiplyBy2 = () => setNumber(number * 2); const multiplyBy2AndAddBy1 = () => { multiplyBy2(); add(); }; return ( Number : {number} + 1 - 1 *2 *2 + 1 ); } 다음과 같이 버튼을 클릭하면 해당 연산을 하도록 구현하였다. 잘 작동이 되는지 확인해보면 *2 ..

⭐State ⭐ 1️⃣ state를 쓰는 이유 2️⃣ useState() 3️⃣ state 불변성 4️⃣ state 다루기 1️⃣ state를 쓰는 이유 버튼 클릭시 ,+1 이 되도록 구현하는 카운터로 예시를 들어봄 /**App.js**/ function App(){ return ( ) } export default App; /**Counter.js**/ export default function Counter(){ let count = 0; return( (count +=1)}>+1Counter : {count} ); ➡️카운터 클릭 시, 변경되지 않는 것을 확인할 수 있다. 왜냐하면, 카운터는 단지 함수구문이기 때문에! 따라서, 함수 컴포넌트 내에서 상태를 관리해야하는 일이 필요하다. 🤔컴포넌트가 상..

라이브러리 vs 프레임워크 리액트 공식 홈페이지에 들어가면 사용자 인터페이스(UI)를 만들기 위한 자바스크립트의 라이브러리라고 소개되어있다. 프레임워크와 라이브러리에 대한 차이점 및 개념들을 짚고 넘어가기 위해 정리를 해보도록 하자! 프레임워크란? 말그대로 뼈대(framework)다. 단, 기능개발을 위해 일정한 형태와 필요한 기능을 갖추고 있는 뼈대인 것이다. 웹 어플리케이션을 만들기 위해선 다음과 같은 기능들이 필요하다. 대표적인 프레임워크 예시 > Java : Spring Python : Django, Flask 안드로이드 : Android 아이폰 : Cocoa Touch Web Application : Angular, Vue.js 등 루비로 작성된 MVC패턴을 이용하는 Ruby on Rails 그..

cubic-bezier란? cubic-bezier(x1,y1,x2,y2) 베지어 곡선이라 하며, 모델링에 사용하는 곡선모델이라 생각하면 됩니다. >> 4개 파라미터는 (x1, y1) (x2, y2) 두 좌표를 의미합니다. (x1, y1) => 베지어 곡선의 시작 곡선을 만드는데 기준이 되는 좌표 (x2, y2) => 베지어 곡선의 마지막 곡선을 만드는데 기준이 되는 좌표 .container { transition: width 0.5s cubic-bezier(0.25, 0.25, 0.75, 0.75); } 해당 엘리먼트의 width를 0.5초 동안 제어 4개의 컨트롤 포인트(0.25, 0.25, 0.75, 0.75)를 가지는 cubic-bezier curve에 의거해 효과를 주겠다 (1) Linear (0..

프로토타입 1️⃣ 생성자 2️⃣ 프로토타입 3️⃣ 프로토타입 생성 4️⃣ 프로토타입 체인 1️⃣ 생성자 생성자란? - 객체를 생성하는 함수 - 함수명의 첫글자는 대문자 - new / this 키워드를 이용한다. 변수타입 변수명 = new 생성자함수(); 구조를 정해놓을 수 있어서 편리하며 생성자 하나로 여러 객체 생성이 가능합니다. const Info(name, age){ this.name = name; this.age = age; } var info1 = new Info("사람1", 20); var info2 = new Info("사람2", 21); var info3 = new Info("사람3", 22); 2️⃣ 프로토타입 프로토타입(prototype)이란? - 어떠한 객체가 만들어지기 위한 객체의 ..

Fetch promise기반으로 구성 자바스크립트의 기본 기능으로 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다. Ajax와 같이 비동기적 방식으로 정보를 가져올 수 있다. 그렇다면 fetch 기본 문법에 대해서 알아보도록 하자 fetch(url, option) .then(res=>res.text()) .then(text=>console.log(text)); ✔️ url : 요청할 url ✔️option - http method, headers, body 정의 - default GET 방식 http 상태는 응답 프로퍼티를 사용해서 확인이 가능하다 status : HTTP 상태 코드 ok : HTTP 상태 코드가 200~299 사이일 경우 true 반환 let response = ..

HTTP Hyper Text Transfer Protocol로 텍스트 기반의 통신 규약 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜 웹에서 이루어지는 모든 데이터 교환의 기초 클라이언트-서버 프로토콜이라고도 한다. 클라이언트-서버 프로토콜 '클라이언트'는 사용자를 대신해서 동작하는 도구로 브라우저에 의해 수행되는데 이때, 브라우저는 항상 요청을 보내주는 개체로써 사용자에게 웹페이지를 표시해줍니다. 클라이언트에 의한 요청에 대한 문서를 제공해주는 '서버'가 존재하며 웹 브라우저와 서버 사이에는 여러 계층으로 이루어져있는데 그 중 애플리케이션 계층에서 동작하는 것들을 일반적으로 프록시(proxy)라고 합니다. * Https : Http를 ssl로 암호화한 것 웹 동작원리는 크게 다음과 ..