코딩 성장기

React에서의 이벤트 처리 방법 리액트에서 이벤트 핸들링을 하는 방법은 DOM에서 이벤트를 다루는것과 비슷하지만 방식은 완전히 같지 않다. 무언가 행동이 일어날때 실행시키고 싶은 함수를 전달하는 방식으로 이벤트를 처리한다. 이벤트 함수 : 무언가 변화가 일어날때 실행되는 함수 1. 이벤트 함수를 만들때, 함수 이름을 camel case로 작성해야 한다. 2. 이벤트 함수를 전달할때, 함수이름을 문자열처리 하지 않고 그대로 전달한다. button 3. 이벤트 함수를 전달할때, 함수를 변수에 담아서 전달하거나 arrow function을 이용하여 함수를 정의해야한다. 함수를 그대로 쓰면, 함수의 실행이 아닌 함수의 호출 결과가 이벤트에 전달되기 때문이다. // 함수 정의하기 return ( ... aler..

state의 특징 변할 수 있는 값. 컴포넌트 사용중에 컴포넌트 내부에서 변할 수 있는 값으로 보통 '상태'를 나타낸다. 예) 전체 트윗 목록(트윗을 새로 작성하거나, 기존 트윗을 지우면 목록에 변화가 일어남, 즉 상태가 변한다.) state 다루기 - useState(State Hook) 1. useState 부르기 useState는 state를 다루는 함수로, 코드 상단에서 리액트로부터 불러온 후 사용해야 한다. import { useState } from "react"; 2. useState로 변수 선언하기 useState를 불러왔으면 state를 사용할 컴포넌트에서 호출한다. 이때 useState를 호출한다는 것은 state라는 변수를 선언한다는 것과 같은 말이며, 함수가 끝나더라도 state 변..

Props의 특징 외부로 부터 전달받은 값. 변할 수 없는 값으로, 컴포넌트의 속성(property)을 의미한다. 상위 컴포넌트로부터 상속받아서 함수의 전달인자처럼 받아 리액트 엘리먼트를 반환한다. 객체의 형태를 가지고있다. 읽기 전용 객체이다. 만약 props가 변하게 된다면, props를 상속시켜준 상위 컴포넌트에 영향을 미치게 되고 side effect를 일으킬 수 있다. 이는 React의 단방향, 하향식 데이터 흐름에 위배가 되므로 props는 변하지 않는 값이 되어야 한다. props 사용방법 1. 상위 컴포넌트를 만든다. 2. 하위 컴포넌트를 만든다. 그 후 상위 컴포넌트 내부에 하위 컴포넌트 이름을 작성한다. 하위 컴포넌트 이름 뒤에는 반드시 띄어쓰기 + / 를 써주어야 한다. // 1. 상..