병아리의 코딩 일기

안녕하세요! 바로 돌아왔습니다! ㅋㅎ 지난 기사에서는 리액트의 라이프 사이클 및 클래스형 컴포넌트에서의 생명 주기 메소드들을 살펴봤는데요, 이번엔 useEffect로 이 메소드들을 편리하게 사용하는 방법을 소개해볼게요 ! useEffect의 등장 useEffect는 React 16.8 버전에 새롭게 추가된 Hook입니다. 처음에도 말했듯이 useEffect를 사용하면 클래스형 컴포넌트를 작성하지 않아도 함수형 컴포넌트에서 side effect를 수행할 수 있습니다. 어떤 개발자분은 'useEffect를 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋다.' 라고 합니다. useEffect는 다음과 같이 두 가지 형태가 ..

여러분 안녕하세요 :) 바쁘게 코딩하다보니 시간이 정말 빨리 가네요 ,, ㅎㅋㅋ 10기는 벌써 2학기 공통 프로젝트 기간에 접어들었는데요, 다들 프로젝트 잘 진행하고 계신가요?! 저는 모바일을 하게 되어서 플러터로 개발하고 있는데,, 1학기보다 더 바쁘게 지내고 있습니다 ㅠㅠㅋㅋ 이번엔 1, 2편으로 나누어 React의 Life Cycle과 useEffect에 대한 내용을 준비해봤습니다 :) useEffect가 뭘까요? useEffect는 함수형 컴포넌트에서도 부작용(Side Effect)을 처리할 수 있게 해주는 Hook입니다. * 여기서 부작용이란, 컴포넌트가 렌더링 되거나 상태가 업데이트 될 때 발생하는 작업을 말합니다. 함수형 컴포넌트 이전에는 클래스형 컴포넌트를 사용했었는데요, 오늘은 클래스형 ..

안녕하세요! 저는 요즘 좋은 유튜브 채널을 알게 되어 리액트 공식문서를 다시 정리해보며 기초를 다지고 있어요. 해당 채널의 영상 내용과 제가 추가적으로 정리한 내용들을 공유해볼게요! 유튜브 채널 이름은 '가장 쉬운 웹 개발 with Boaz' 인데요, [가장 쉬운 리액트] 카테고리의 영상들을 정주행하는 중입니다 ㅎㅎ 예제 만들기 위주의 영상이 아닌, 리액트의 개념들과 동작 원리부터 차근 차근 설명해주는 점이 너무 좋았어요! 그럼, 첫 번째 시간으로 Element 에 대해 알아봅시다! Element React elements는 몇가지 특징을 가진다. React앱의 가장 작은 구성 요소 거대한 리액트라는 앱의 기초가 되는 elemen에 대해 명확히 알고 가는 것이 굉장히 중요! jsx가 나타내는 것이 ob..

아래 내용은 인프런 SOAPLE 님의 '처음 만난 리액트(React)' 강의 내용을 요약 정리한 것임을 알려드립니다. 😀 무료 강의인데 내용이 정말 좋더라구요! 그럼 시작하겠습니다~! 리액트는 레고블록을 조립하듯 각각의 컴포넌트를 맞추어서 개발한다. 리액트 컴포넌트는 자바스크립트의 함수처럼 입력을 받아서 출력을 내뱉는데, 입출력이 일반 함수와는 조금 다르다. 입력: Props | React component | 출력: React element 위와 같이, React Component는 어떠한 속성을 입력으로 받아서 그에 맞는 element 를 생성하여 리턴해준다. 그리하여 생성된 React element는 리액트 앱을 구성하는 가장 작은 빌딩 블록들이 된다. 이 친구는 자바스크립트의 객체 형태로 존재하며..