brobro332.dev

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다.  훅(Hook)이 뭘까?기존의 함수 컴포넌트는 클래스 컴포넌트와는 다르게 코드도 굉장히 간결하고 별도로 state를 정의하거나 컴포넌트의 생명주기 함수를 사용할 수 없었다. 이런 기능을 지원하기 위해 나온 것이 바로 훅이다.훅라는 단어는 갈고리를 뜻하는데, 원래 존재하는 어떤 기능에 갈고리를 거는 것처럼 끼어 들어가 같이 수행되는 것을 의미한다.이러한 훅의 이름은 모두 use로 시작한다. 물론 개발자가 직접 커스텀 훅을 만들어 사용할 경우 이름을 개발자 마음대로 지을 수도 있지만 그러한 경우에도 이름 앞에 use를 명시해 주는 것이 올바르다. useStatestate를 사용하기 위한 훅이다.function Counter(props) { va..

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. 리액트 컴포넌트의 생명주기가 뭘까?리액트 컴포넌트가 생성되고, 다시 렌더링 되고, 화면에서 사라지기까지의 과정을 말한다. 자세히 알아보자리액트 컴포넌트의 생명주기는 크게 3가지로 나뉜다.마운트컴포넌트의 생성자가 실행되는 과정이다. 사람에 비유하면 출생에 해당한다.생성자에서는 상태를 정의하고 컴포넌트가 렌더링 된다.이때 클래스 컴포넌트에서는 componentDidMount() 함수가 호출된다.참고로 이번 실습에서는 클래스 컴포넌트를 다룰 것이다. 하지만 이미 언급했듯 실제로는 함수 컴포넌트를 대부분 사용할 것이므로 가볍게 실습해 보면 좋을 것 같다. 업데이트컴포넌트의 props가 변경되거나 상태가 변경될 경우, 또는 forceUpdate() 함수를..

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다.  리액트는 상태(State)를 관리해야 한다다음 포스팅에서 다루게 될 리액트의 생애주기를 공부하기 위해서는 먼저 상태에 대해서 알아야 한다.상태는 리액트 컴포넌트의 변경 가능한 데이터이며, 상태가 변경되면 컴포넌트가 재렌더링된다.그렇기 때문에 상태를 정의할 때는 꼭 렌더링이나 데이터 흐름에 사용되는 값만 상태에 포함시켜야 한다.  상태를 무분별하게 정의한다면 애플리케이션의 성능을 저하시킬 수 있기 때문이다.상태는 따로 복잡한 형태가 있는 게 아니라 하나의 자바스크립트 객체이다. class LikeButton extends React.Component {      constructor(props) {       super(props);       ..

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. 컴포넌트(Component)에 대해 알아보자JSX, 엘리먼트를 공부하면서 컴포넌트라는 용어를 확인할 수 있었을 것이다.실습을 통해 컴포넌트를 개발하기도 했다.컴포넌트는 props를 통해 속성을 입력하여 리액트 엘리먼트를 출력하는 자바스크립트 함수이다.조금 더 쉽게 설명하자면 애플리케이션을 구성하는 재사용 가능한 부품이라고 할 수 있다.또한 하나의 컴포넌트를 여러 개의 컴포넌트로 구성할 수도 있다.컴포넌트 재사용의 이점은 다들 아시다시피 코드의 가독성을 확보할 수 있고, 코드 양을 줄임으로써 개발 및 유지 보수 시간을 절감할 수 있다.props 어디서 많이 본 것 같은데...저번 포스팅에서 엘리먼트를 설명할 때 부모 컴포넌트에서 하위 컴포넌트로 전..

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. 엘리먼트(Element)란 뭘까?우리가 크롬 개발자도구를 통해 확인할 수 있는 Elements는 DOM 엘리먼트를 의미한다.DOM 엘리먼트란 브라우저에서 실제로 렌더링 된 HTML 요소이다. 반면 리액트 엘리먼트는 화면에 나타나는 내용을 기술한 자바스크립트 객체를 일컫는다.DOM에 직접 표시되지 않는다. 다시 말해 렌더링 되지 않았다는 것이다. 리액트 엘리먼트 정의가 너무 추상적이라서 이해가 안 되는데?/* JSON 형태{  type: 'button',  props: {    className: 'bg-green',    children: {      type: 'b',      props: {        children: '테스트용 텍스트 입..

📘  『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. JSX를 알아볼까?const element = Hello, world! {name};JSX는 Javascript and XML를 의미한다.자바스크립트를 확장한 문법으로, 상기 코드와 같이 자바스크립트와 XML, HTML을 합친 것이라고 보면 된다.여기서 한 가지 기억해야 할 부분은 JSX 문법을 사용하면 컴포넌트 내부에서 createElement() 메소드로 대체된다는 점이다. // JSconst element1 = React.createElement('h1', {className: 'greeting'}, 'Hello, world! ${name}'});// JSXconst element2 = Hello, world! {name};/*elemen..

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다.리액트 프로그래밍을 위해 준비해야할 것들리액트 프로젝트를 생성하고 실행하려면 우선 Node.js와 Visual Studio Code를 설치해야 한다.이 포스팅에서는 두 프로그램의 설치는 다루지 않는다. 개발자는 항상 물음표를 찍으며 사고해야 한다던데 우린 이것들을 왜 설치해야 할까? 그래서 Node.js를 왜 설치해야 해? Node.js가 필요한 첫 번째 이유는 브라우저 말고도 다른 환경에서 자바스크립트 코드를 실행할 수 있게 해주는 자바스크립트 실행환경이기 때문이다.모두 아시다시피 자바스크립트 엔진은 이미 브라우저에 내장되어 있기 때문에 이미 우리들은 브라우저 위에서 자바스크립트 코드를 실행할 수 있다. 그런데 개발을 위해선 브라우저를 켜지 않고..

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. 리액트를 공부하게 된 이유나는 여태껏 JSP와 제이쿼리를 통해 프론트단을 구현해 왔다. 이번에 토이 프로젝트로 REST API 서버를 개발하며 프론트단이 리액트일 경우 어떻게 요청을 하는지, 어떤 데이터가 어떻게 정렬되어 조회되어야 가공해서 렌더링 하기에 용이한지 공부하고 싶었다.사실은 토이 프로젝트를 진행할 때마다 프론트엔드 개발자님을 구하고 싶은 마음은 굴뚝같지만 당장 본인 일정 조정에도 어려움을 겪어 결국 자급자족하기로 결정했다.그리고 뷰보다는 리액트가 참고할 수 있는 정보가 많을 것 같아서 리액트를 도입하기로 결정했다.책의 전반적인 부분을 나름대로 필터링해서 정리해 볼 생각이다. 🔥 리액트가 뭔데?대표적인 자바스크립트 UI 라이브러리다...