우아한테크코스

[React] Props(불변 객체, Prop Drilling)

결, 꼬재랑 함께하는 레벨2 방학 스터디 😀 Props 컴포넌트에 어떠한 값을 전달할 때 props를 사용한다. 여기서 props는 properties의 줄임말이다. props는 부모 컴포넌트가 전달할 수도 있고 컴포넌트 자체의 defaultProps 정적 메서드(static method)를 통해 전달할 수도 있다. props는 불변성을 가진 읽기 전용이다. porps 예시 // 함수 컴포넌트 function Coke(props){ return Hello, {props.name}; } // 클래스 컴포넌트 class Coke extends React.Component{ render(){ return Hello, {this.props.name}; } } // 비구조화 할당(구조 분해 할당) function..

[React] Ref(React.createRef, ref attribute, useRef)

결, 꼬재랑 함께하는 레벨2 방학 스터디 Ref Ref는 render 메서드에서 생성된 DOM 노드나 React Element에 접근 하는 방법을 제공한다. Ref는 React.createRef()를 사용해 생성하고, 만든 Ref는 참조하려고 하는 노드의 ref attribute에 연결해 준다. Function Component는 인스턴스가 없기 때문에 Function Component에 ref attribute를 사용할 수 없다. 하지만 DOM element나 Class Component의 인스턴스에 접근하기 위해 ref attribute를 Function Component에서 사용하는 것은 된다. Ref는 컴포넌트 Life Cycle 내에서 유지되는 변경 가능한 변수이다. Ref는 State와 달리 ..

[React] State의 모든 것(feat.batch)

결, 꼬재랑 함께하는 레벨2 방학 스터디 State state는 React에서 데이터를 다루기 위한 객체이다. 컴포넌트에 전달되는 props와 같이 컴포넌트의 렌더링에 영향을 주지만 state는 컴포넌트 안에서 제어된다는 차이점이 있다. state의 값이 변경되면 리렌더링 된다. state값을 변경 시키기 위해서는 setState를 호출하면 된다. 상태를 직접 변경하지 않고 굳이 setState()를 사용하는 이유가 무엇일까요? state는 불변성(immutable)을 유지해야 하기 때문이다. setState는 비동기적으로 동작하기 때문에 state를 직접 수정하면 이전 업데이트 된 데이터가 다음 업데이트 될 데이터에 영향을 줘서 예상하지 못한 버그가 발생하기 때문이다. 따라서 setState로만 sta..

[React] Key

결, 꼬재랑 함께하는 레벨2 방학 스터디 Key React에서 key는 컴포넌트 배열을 렌더링할 때 어떤 원소에 변동이 있는지 알아내기 위해 사용하는 값입니다. 따라서 key는 각 원소에 안정적인 고유성을 부여한다. key는 element를 만들 때 포함해야 하는 특수한 문자열 attribute이다. 다음과 같이 코드를 작성하면 React는 에러를 노출 시킨다. element에 고유한 key 속성 값을 넣으라는 에러 메시지가 나타나는데, 이때 index 값을 key 속성값으로 대입하면 에러 메시지는 나타나지 않으나 다음과 같은 문제가 발생한다. key값을 배열의 index로 하면 발생하는 문제! React 렌더링에서 재조정 시, 컴포넌트는 key를 보고 해당 element를 비교를 하는데 배열이 재배열 ..

[React] VirtualDOM

결, 꼬재랑 함께하는 레벨2 방학 스터디 React란? React는 SPA 웹 프레임워크로 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. 즉, 사용자와 상호작용할 수 있는 동적인 애플리케이션을 개발 할 수 있는 JavaScript 라이브러리이다. 이러한 React는 다음과 같은 특징을 가지고 있다. 가상 돔(Virtual DOM) JSX 단방향 데이터 바인딩 선언형 프로그래밍 컴포넌트 기반 특징들 중에서 Virtual DOM에 알아 보려고 한다. Virtual DOM (Virtual Document Object Model) DOM은 HTML, XML, CSS 등을 트리 구조로 인식하고 데이터를 객체로 간주해 관리하고 브라우저에서 보이는 화면을 DOM트리를 반영해 그리게 된다. Jav..

[React] JSX

결, 꼬재랑 함께하는 레벨2 방학 스터디 React에서 사용하는 JSX란? JSX(JavaScript XML)는 JavaScript에 XML을 추가, 확장한 문법입니다. XML이란? XML(eXtensible Markup Language)은 W3C에서 개발된, 다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어이다. XML은 주로 다른 종류의 시스템, 특히 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고 받을 수 있게 하여 HTML의 한계를 극복할 목적으로 만들어 졌다. HTML의 한계? HTML은 확장용이성, 구조용이성, 문서확인용이성 등에서의 한계가 나타났다. 사용자가 주어진 태그의 범위안에서만 문서내의 데이터를 다뤄야했기 때문이다. 따라서 XML이 나타나게 되었다...

우테코 4월 4주차 주간회고

우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고 있습니다. 부제: 낯설다...React 지난주 회고 우테코 4월 3주차 주간회고 우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고 있습니다. 지난주 회고 없음 이번주 회고 Facts (사실, 객관) 오프라인 서울로 상경 레벨2 React 시작 Feelings (느낌, 주관) 그 동안 방치 kit-developer.tistory.com 이번주 회고 Facts (사실, 객관) 페이먼츠 미션 step1 React 학습 Storybook 적용 Component-Driven Development(CDD) 재사용 가능한 컴포넌트 구현 Feelings (느낌, 주관) 지금까지 React를 top-down 방식으로 구현을 했는데 이번 미션 부터는 작은 컴..

자바스크립트에서 객체 지향을 하는 게 맞나요?

우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고 있습니다. https://yozm.wishket.com/magazine/detail/1396/ 자바스크립트에서 객체 지향을 하는 게 맞나요? | 요즘IT 이번 글에서는 객체지향 프로그래밍에 대해 이야기를 해보려고 합니다. 그리고 자바스크립트의 객체지향은 일반적인 객체지향 프로그래밍과는 어떻게 다른지 그리고 Javascript에서는 객체지향 yozm.wishket.com 우아한테크코스 슬랙 fe-4기 잡담 채널에 로이님께서 좋은 글을 공유해 주셨다. 해당 글을 읽고, 내 생각을 써보려고 한다. 자바스크립트에서 객체 지향을 하는 게 맞나요? 라는 제목에 끌려 오신 분들은 위에 있는 링크를 들어 가시는 걸 추천 드립니다. 목차 내가 고민 했던 객체지향 ..