리액트로 만들어진 사이트에서 컴포넌트가 무엇인지 설명하는 리액트 강의리액트에서 컴포넌트가 무엇인지 강의하는 리액트로 만들어진 udemy 사이트의 컴포넌트 예시컴포넌트는 리액트에서 사용되는 하나의 단위로, 우리 생각하는 사이드바, 헤더, 모달 등 모든 영역을 나타낼 수
리액트에서 props는 아래 한줄로 요약이 가능한 것 같다.컴포넌트를 함수라 했을 때, props는 함수에서 필요로 하는 파라미터 목록이다.아래 예제를 통해 props를 확인해 보자.위 예제는 자식 컴포넌트에서 userName, age라는 props를 받고 있다. 따라
우리는 컴포넌트를 다루면서 input 필드 내용 업데이트, 버튼 클릭을 통한 화면 내 내용 전환 등 다양한 인터랙션을 통해 화면의 내용을 변경할 필요가 있다. 이를 위해 컴포넌트는 최근의 상태를 기억할 필요가 있는데, 리액트는 이를 위해 state라고 불리는 컴포넌트
리액트는 많은 기능 중 우리가 만든 컴포넌트를 화면에 렌더링 하는 역할도 맡고 있다. 리액트가 컴포넌트를 렌더링하는 이유는 크게 두가지로 나눌 수 있는데, 컴포넌트의 초기 렌더링과 컴포넌트의 state 변화이다. 아래에서 좀 더 자세히 알아보자. 당연히 맨처음 컴포넌트
useState의 단점 우리가 작성하는 컴포넌트에 복잡한 로직이 들어갈 수록, 컴포넌트 내의 state를 처리하는 로직에 대한 관리가 어려워진다. 아래 예제를 보자. !codesandbox[epic-haslett-4v0g5k?fontsize=14&hidenavigat
Lifting state up and Prop drilling 우리는 컴포넌트를 계층적으로 만들 수 있고, 자식 컴포넌트에 state나 props를 전달할 수 있다. 그리고 많은 컴포넌트에서 공통의 state 관리를 위해 lifring state up이라고 불리는 상
주의) 본 게시물은 문제가 있는 코드를 실행한 codesandbox를 다수 포함하고 있습니다. 일단 써보자 setInterval 목표 정의 setInterval로 주기별 작업 해보기 컴포넌트 외부로 부터 state나 prop을 받아 setInterval에 전달하기 s
Side effect? 리액트는 side effect라는 것을 처리하기 위해 useEffect를 사용하라고 한다. 그렇다면 side effect는 무엇이고, 이것을 왜 별도로 처리해야 하는 것일까? > 함수 내 특정 동작이 함수 외부에 영향을 끼쳐, 프로그램의 동작을
useEffect는 sideEffect를 처리하는 콜백과 의존성 배열을 입력으로 받는다. 이때 의존성 배열에 존재하는 참조변수가 변경되면 해당 콜백이 다시 실행되는 형태를 가진다. 즉, useEffect는 의존성 배열 내에 존재하는 참조변수의 변경이 일어나지 않으면 콜