분류 전체보기
-
[ReactJS] Composition vs InheritanceProgramming/ReactJS 2022. 12. 1. 23:32
Composition 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것을 의미한다. 그래서 합성이라는 의미에 더 가깝다. 조합 방법에 따라 컴포지션 사용 기법이 나뉘는데, 다음과 같다. Containment 하위 컴포넌트를 포함하는 형태의 합성 방법이다. 보통 Sidebar나 Dialog 같은 Box 형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다. 리액트 props의 children 형태를 사용하는데, 아래의 코드를 참고하자면 {props.children}을 사용하면서 해당 컴포넌트의 하위 컴포넌트가 모두 children으로 들어오게 된다. function FancyBorder(props) { return ( {props.childeren} ) } function WelcomeDial..
-
[ReactJS] Lifting State UpProgramming/ReactJS 2022. 12. 1. 11:47
Shared State 리액트 개발을 하다보면 하나의 데이터를 여러 개의 컴포넌트에서 표현해야 하는 경우가 생긴다. 이럴 때 가장 가까운 부모 컴포넌트의 데이터를 공유하는 것이 효율적이다. Shared State는 State에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우를 의미한다. 하위 컴포넌트에서 State 공유하기 function BoilingVerdict(props) { if (props.celsius >= 100) { return 물이 끓습니다. } return 물이 끓지 않습니다. } // 자식 컴포넌트 import { useState } from "react" function BoilingVerdict(props) { if (props.celsius >= 100) { ..
-
[ReactJS] FormsProgramming/ReactJS 2022. 12. 1. 00:56
Form 텍스트 입력, 체크박스 등 사용자가 선택하는 모든 것을 의미한다. 즉 사용자로부터의 입력을 받기위해 사용한다. Controlled Components 사용자가 입력한 값에 접근하고 제어할 수 있도록 하는 컴포넌트이다. 리액트의 통제를 받는 Input Form Element을 의미한다. 사용자의 이름을 입력받는 예제코드이다. function NameForm(props) { const [value, setValue] = useState(''); const handleChange = (event) => { setValue(event.target.value); // setValue(event.target.value.toUpperCase()); // 입력받은 값을 모두 대문자로 변경 } const han..
-
[ReactJS] List and KeysProgramming/ReactJS 2022. 11. 30. 22:58
List 리액트에서는 배열을 사용하여 list 형태로 element들을 렌더링 할 수 있다. Keys 열쇠는 모두 다 모양이 다른 고유한 성질을 지닌다. 그래서 프로그래밍에서의 key는 각 객체나 아이템을 구분할 수 있는 고유한 값을 의미하고, 리액트에서는 아이템들을 구분하기 위한 고유한 문자열을 의미한다. 여러 개의 Component 렌더링 하기 : map() mapping은 한 쪽에 있는 아이템과 다른 쪽에 있는 아이템을 짝 지어주는 역할을 한다. const doubled = numbers.map((number) => number * 2) number 배열의 처음부터 끝가지 2배 연산을 수행한 뒤 반환해준다. const nubmers = [1, 2, 3, 4, 5]; const listItems = ..
-
[ReactJS] Conditional RenderingProgramming/ReactJS 2022. 11. 30. 21:10
Conditional Rendering 조건에 따른 렌더링(조건부 렌더링)이라고 해석할 수 있다. 여기에서의 조건은 프로그래밍에서 일반적으로 사용하는 조건문 정도로 생각하면 된다. function UserGreeting(props) { return Welcome back!; function GuestGreeting(props) { return Sign in! } 이러한 코드를 예시로 들어보자. 여기서 게스트와 유저를 구분지어 return 값을 반환해야 할 필요가 있다. function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return ; } return ; } 위와 같이 조건에 따라 다른 렌더링을 진행하는 것을 ..
-
[ReactJS] Handling EventsProgramming/ReactJS 2022. 11. 30. 15:56
Events 웹사이트에는 다양한 이벤트들이 존재한다. 이벤트를 처리하는 것을 '이벤트를 핸들링한다'라고 표현한다. 아래가 React에서 사용하는 방식, 위는 Real DOM에서 사용하는 방식이다. 이렇게 함수를 전달하는 방식과 표기법이 다른 것을 알 수 있다. Event Handler class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // callback에서 'this'를 사용하기 위해서는 바인딩을 필수적으로 해줘야 함 this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(pr..
-
[ReactJS] HooksProgramming/ReactJS 2022. 11. 30. 14:04
Hooks Component에는 함수, 클래스 컴포넌트 이렇게 총 두 종류가 있는데, 그 중 Hooks 같은 경우 함수 컴포넌트에 해당된다. 함수 컴포넌트는 state 사용이 불가능하고, Lifecycle에 따른 기능 구현이 불가능하다는 특징이 있다. 하지만 Hooks을 사용한다면 함수 컴포넌트에서도 클래스 컴포넌트의 기능을 사용할 수 있게 된다. 이름 앞에 use를 붙여 Hooks임을 나타내주면 커스텀 훅으로도 사용이 가능하다. useState 함수 컴포넌트에서도 State를 사용할 수 있게 해주는 훅이다. 사용 방법은 다음과 같다. const [변수명, set함수명] = useState(초기값); 이를 실제로 활용하는 예제코드이다. 카운트가 증가하면 컴포넌트가 재랜더링 되는데, useState 같은 ..
-
[ReactJS] State and LifecycleProgramming/ReactJS 2022. 11. 30. 13:14
State 리액트 컴포넌트의 상태라는 의미를 가지는데, 개발자가 직접 정의해서 사용하게 된다. 랜더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다. 그렇지 않은 경우 컴포넌트의 인스턴스 필드로 정의하면 된다. 하나의 자바스크립트 객체라고 생각하면 된다. class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } } 생성자에서 state를 정의하는데, 그 이후 state를 직접 수정해서는 안된다. this.state = { name: 'cdd' }; // state를 직접 수정 this.setState({ name: 'cdd' }); // setStat..