[React 학습하기]state: 컴포넌트의 메모리 - React는 어떤 state를 반환할지 어떻게 알 수 있을까?(+ Hooks 이해하기)

학습 대상useState를 이미 사용해본 사람state의 작동 원리가 궁금한 사람React는 어떤 state를 반환할지 어떻게 알 수 있을까?우리가 useState를 호출할때 어떤 state 변수를 참조하는지에 대한 정보를 받지 못한다는 것을 눈치챘는가?import { useState } from 'react';const [index, setIndex] = useState(0);useState에 전달되는 식별자가 존재하지 않는데 react는 어떤 state 변수를 반환할지 어떻게 알 수 있을까? 함수를 파싱하는 것과 같은 마법에 의존하는 것일까?정답은 아니다.React에서 간결한 구문을 구현하기 위해 Hooks은 동일한 컴포넌트의 모든 렌더링에서 안정적인 호출 순서에 의존한다.아래의 규칙을 따르면, Ho..

• format_list_bulleted 개발 공부/React-Next.js
• · 2024. 8. 7.
• textsms

[React 학습하기] 컴포넌트 순수성 유지

일부 JavaScript 함수는 순수하다. 순수 함수는 계산만 수행하고 그 이상은 수행하지 않는다. 컴포넌트를 엄격하게 순수 함수로만 작성하게 된다면 우리는 당황스러운 버그와 예측할 수 없는 동작을 피할 수 있다.하지만 이러한 이점을 얻으려면 몇 가지 규칙을 준수해야하는데, 이제부터 알아보도록 하자.순수성은 무엇일까?순수 함수는 다음과 같은 특징을 갖는다.자신의 일에만 신경쓰고 호출되기 전 존재했던 객체나 변수를 변경하지 않는다.동일한 입력이 들어오면 동일한 출력을 반환한다.우리는 순수 함수를 이미 알고있다.예를 들면 수학 공식에서y = 2x를 생각해보자.x에 같은 입력을 전달하면 항상 동일한 출력이 반환됨을 우리는 이미 알고 있다.React는 이 개념을 중심으로 설계되었다. React는 우리가 작성하는..

• format_list_bulleted 개발 공부/React-Next.js
• · 2024. 8. 7.
• textsms

[React 학습하기] 컴포넌트에 props 전달하기

JSX 전개 구문으로 props 전달하기때때로 우리가 전달하는 props는 반복적이다.function Profile({ person, size, isSepia, thickBorder }) { return ( );}반복적인 코드는 가독성을 높일 수 있다는 점에서 잘못된 것은 아니지만 때로는 간결함이 중요할 때도 있다.Profile 컴포넌트가 Avatar 컴포넌트에게 그런 것처럼, 일부 컴포넌트는 그들의 모든 props를 자식 컴포넌트에 전달하기도 한다. 이 경우 Profile 컴포넌트는 props를 직접적으로 사용하지 않기 때문에, 간결하게 전개구문(Spread)을 사용하는 것이 합리적이다.function Profile(props) { return ( ..

• format_list_bulleted 개발 공부/React-Next.js
• · 2024. 8. 7.
• textsms

[React 학습하기] Quick Start

학습 목적React의 기초 지식이 모자라다는 생각이 들어 직접 학습하기로 마음먹음어떤 강의보다도 리액트 공식 문서가 믿음직스럽기 때문에 선택이 페이지에선 당신이 매일 사용하게 될 React 개념의 80%를 소개합니다.Creating and nesting components리액트 앱은 컴포넌트로 만들어진다.컴포넌트는 고유한 로직과 외형을 가진 UI의 일부이다. 컴포넌트는 버튼만큼 작기도 하고 전체 페이지만큼 크기도 하다.리액트 컴포넌트는 마크업을 반환하는 Javascript 함수이다.function MyButton() { return ( I'm a button );}우리는 MyButton 컴포넌트를 선언했기 때문에, 또다른 컴포넌트에 중첩할 수 있다.export default function My..

• format_list_bulleted 개발 공부/React-Next.js
• · 2024. 8. 7.
• textsms

팀 프로젝트 회고 : 괴발개발

괴발개발 깃허브  |  괴발개발 바로가기  |  팀노션  |  괴발개발 기획서  |  컨벤션안녕하세요. 9월도 벌써 끝나버렸네요.제가 데브 코스에 합격하고 공부한지 벌써 4개월이 지났습니다.이번달 회고는 이번 프로젝트에선 어떤것을 배웠지?를 중점으로 회고하겠습니다.🍁9월의 시작9월 첫 주부터 저는 너무 바빴습니다. 일단 Typescript 사용이 능숙해지고 싶어서 이펙티브 타입스크립트 스터디를 진행했고 어떻게든 3주라는 시간동안 모든 챕터를 읽었습니다. 다 읽었다는 사실은 있지만 머리에 많이 남았나를 물어본다면 그렇게 많이 남지는 않는 것 같습니다. 하지만 책을 고작 한번 읽어서 마스터 할 생각은 없었고, 퀴즈를 제출하기 위해 생각해보고 이 부분이 오늘 읽었던 분량에서 중요한부분인지 판단하는 과정에서 ..

• format_list_bulleted 프로젝트/개발괴발
• · 2024. 8. 6.
• textsms

리액트 에디터 개발 기록

현재 나는 무엇을 하고있는가?저는 현재 프로젝트로 개발자 커뮤니티를 제작중입니다.여기서 특징은 게시글과 댓글 모두 마크다운 문법을 사용할 수 있는 에디터를 이용한다는 것인데 직접 만들어 사용하기로 결정했습니다.왜 에디터를 직접 만드려고 하는가?기존에 존재하는 에디터를 가져와도 되지 않나?라는 의문이 충분히 드실 수 있는데, 일단 기존에 존재하는 WYSIWYG(위즈윅: What you see is what you get) 에디터를 사용하기 위해 여러가지 패키지들을 다운받아봤지만 원하는 기능(코드 블럭을 사용할 수 있는가?)을 충족시키는 에디터가 별로 없었고 찾았더라도 업데이트가 되어있지 않아 사용하고있는 리액트 버전에선 동작하지 않는 경우가 많았습니다. 그나마 CKEditor를 끝까지 사용해보려했지만 제가..

• format_list_bulleted 프로젝트/개발괴발
• · 2024. 8. 6.
• textsms