본문 바로가기

💻 DEV/React5

[React] React 의 생명주기(Life Cycle) 란? ✨ Life Cycle 이란? 컴포넌트가 브라우저상에 나타나고(Mount), 업데이트 되고(Update), 사라지는 일련의 과정을 칭한다. 이러한 과정에서 호출되는 메서드를 Life Cycle Method 라고 부르며, 클래스형 컴포넌트에서만 사용할 수 있다. (함수형 컴포넌트는 React 16.8 버전부터 도입되었으며, 현재는 useState 나 useEffect로 더욱 많이 활용된다) 각 단계별로 호출되는 메서드의 순서와 종류가 다르다. ✨ 1. Mount : DOM 에 엘리먼트를 넣는 작업 constructor: 컴포넌트 클래스의 생성자 함수이자, 컴포넌트가 생성될 때 호출되는 함수이다. State와 다른 값들의 초기값을 지정할 때 사용한다. 또한, props 를 매개변수로 받고, super(pro.. 2021. 5. 27.

[React] React 에서 이미지(Image) 첨부하기 ✨ Img tag 란? 이미지를 불러올 수 있는 HTML 태그를 의미하며, DOM을 통해서도 작동 가능하다. React 에서의 img 태그는 기본적으로 HTML 태그와 동일한 attribute 를 가지며, class 만 className (리액트 문법) 으로 변경하여 지정해주면 된다. ✨ React 에서 이미지 불러오기: 웹 url 을 통해 이미지를 불러오고자 한다면 src='###' 안에 url 을 문자열로 작성해주면 된다. 로컬 디렉토리에 저장되어 있는 이미지를 불러오기 위한 방법으로는 두 가지가 있다. 1. React App 의 Public 폴더 내에서 불러오는 방법 2. 상대 경로와 import문을 활용하여 불러오는 방법 ✨ 1. Public 폴더 내에서 불러오기 React App 최초 생성 시 .. 2021. 5. 9.

[React] React 의 상태 (State) 와 이펙트 훅(Effect Hook) ✨ State 란? 컴포넌트 내에서 동적으로 변경되는 값이다. ✨ State 의 특징은? 컴포넌트 내부에서 제어(관리)된다. State 업데이트는 비동기적(Asynchronous)이다. DOM 은 State 가 변경될 때마다 re-rendering 되지 않으며, 여러 차례의 setState 가 있다면 전부 통합하여 한 번에 re-rendering 한다. State 를 props 로 자식 컴포넌트에 전달할 수 있다. (캡슐화 되었기 때문이다.) ✨ State 를 사용하는 방법은? 함수형 컴포넌트에서는 useState 라는 훅(Hook)을 통해 사용할 수 있다. useState 를 활용하여 state 의 초기값을 지정해줄 수 있으며, 초기값은 어떠한 자료형이든 될 수 있다. (문자열, 배열, 객체 등) se.. 2021. 5. 9.

[React] React.Fragment 란? ✨ React Fragment 의 기본 기능 컴포넌트의 리턴문 내부에서 별도의 노드를 추가하지 않고 여러 엘리먼트를 그룹화할 수 있도록 한다. const Component = () => { return ( ) } ✨ Fragment 의 특징은? Key 를 전달할 필요가 없는 경우 빈 태그처럼 사용할 수 있다. Key 가 있다면 를 명시해주어야 한다. 엘리먼트가 너무 많아질 때는 최상단과 하단에 Fragments을 추가해 그룹화 하는 방법을 활용할 수 있다. const Component = () => { return ( // Key 가 없는 경우 ) } Fragment 의 장점은? React 문법 특성상 하나의 컴포넌트 당 하나의 엘리먼트만 반환할 수 있기에, 반환문을 div 나 여타 태그로 전체 엘리먼트.. 2021. 5. 9.

[React] 리스트의 Key ✨ React 에서 Key란? 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트이다. React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. function NumberList(props) { return ( 1 2 3 ) } Key 의 특징은? 고유한 값이어야 하며, 형제 노드인 다른 아이템과의 중복된 키 값은 허용되지 않는다. 또한, 컴포넌트의 구성요소로 전달되지 않는다. (따라서 props 에 key 가 포함되었다 해도 props.key 로 사용 불가하다) 주의할 점 컴포넌트 하나를 여러 차례 반복해서 나열할 경우 컴포넌트 자체가 하나의 list 가 된다. 이 경우, 컴포넌트 자체의 key 값을 변경해주어야 한다. function ListItem(props) { .. 2021. 5. 9.

이전 1 다음

티스토리툴바