개발 블로그

CSS 1. CSS란? CSS는 Cascading Style Sheets의 약자로써 스타일링을 위한 일종의 언어라고 생각하면 됩니다. CSS에는 여러가지 스타일이 정의되어 있는데 한 번에 여러 스타일이 적용될 경우에 스타일 충돌을 막기 위해 계단식으로 스타일이 적용되는 규칙을 가지고 있습니다. 엘리먼트에 스타일이 적용되는 규칙을 selector라고 부릅니다. 단어 그대로 해석하면 선택자라고 할 수 있는데 스타일을 어떤 엘리먼트에 적용할지를 선택하게 해주는 것입니다. CSS는 크게 선택자와 실제 스타일로 이루어져 있습니다. 2. CSS 문법과 선택자 선택자를 먼저 쓰고 이후에 적용할 스타일을 중괄호 안에 세미콜론(;)으로 구분하여 하나씩 기술합니다. 선택자에는 해당 스타일이 적용될 .HTML 엘리먼트를 넣..

컨텍스트란 무엇인가? 컨텍스트는 리액트 컴포넌트들 사이에서 데이터를 기존의 props를 통해 전달하는 방식 대신 데이터를 컴포넌트 트리를 통해 곧바로 컴포넌트에 전달하는 새로운 방식을 제공합니다. 컨텍스트를 사용하면 여러 컴포넌트에 걸쳐 굉장히 자주 사용되는 데이터를 어떤 컴포넌트든지 쉽게 접근할 수 있습니다. props를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식은 데이터가 여러 컴포넌트에 걸쳐 자주 사용된다면 반복적인 코드가 많이 생기고 지저분해진다는 단점이 있습니다. 이러한 불편함을 개선하기 위해 생겨난 것이 바로 컨텍스트입니다. 컨텍스트를 사용하면 일일이 props로 전달할 필요없이 데이터를 필요로 하는 컴포넌트에 곧바로 데이터를 전달할 수 있습니다. 컨텍스트를 사용하면 코드가..

합성에 대해 알아보기 리액트에서 Composition은 합성을 의미하여 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것을 말합니다. 리액트로 개발을 하다 보면 이처럼 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 일이 굉장히 많습니다. 그래서 합성은 리액트 전반에 걸쳐서 굉장히 많이 사용되는 방법이기 때문에 잘 알고 있는 것이 좋습니다. 합성이라고 해서 무작정 그냥 컴포넌트들을 붙이는 것이 아니라 여러 개의 컴포넌트를 어떻게 조합할 것인가에 대한 고민이 필요합니다. 1) Containment Containment는 방지, 견제라는 뜻을 갖고 있지만 리액트에서는 Contain의 의미가 조금 더 강하다고 할 수 있습니다. 리액트에서 Containment는 하위 컴포넌트를 포함하는 형태의 합성..

폼이란 무엇인가? 폼은 사용자로부터 입력을 받기 위해 사용하는 것입니다. 리액트의 폼과 HTML의 폼은 조금 차이가 있습니다. 리액트는 컴포넌트 내부에서 state를 통해 데이터를 관리하는 반면, HTML 폼은 엘리먼트 내부에 각각의 state가 존재합니다. 이름 : 제출 위 코드는 기본적인 HTML 폼입니다. 이 코드는 리액트에서도 잘 작동하지만 자바스크립트 코드를 통해 사용자가 입력한 값에 접근하기에는 불편한 구조입니다. 그렇기 때문에 사용자가 입력한 값에 접근하고 제어할 수 있도록 하는 제어 컴포넌트에 대해서 배워보겠습니다. 제어 컴포넌트 제어 컴포넌트는 그 값이 리액트의 통제를 받는 입력 폼 엘리먼트를 의미합니다. HTML 폼의 경우에는 각 엘리먼트(input, textarea, select 등)..

리스트와 키란 무엇인가? 리스트는 컴퓨터 프로그래밍에서 같은 아이템을 순서대로 모아놓은 것입니다. 리스트를 위해 사용하는 자료구조가 바로 배열입니다. 배열은 자바스크립트의 변수나 객체를 하나의 변수로 묶어놓은 것입니다. const numbers = [1, 2, 3, 4, 5]; 키는 컴퓨터 프로그래밍에서 각 객체나 아이템을 구분할 수 있는 고유한 값을 의미합니다. 리액트에서는 배열과 키를 사용하여 반복되는 다수의 엘리먼트를 쉽게 렌더링할 수 있습니다. 여러 개의 컴포넌트 렌더링하기 리액트에서 여러 개의 컴포넌트를 렌더링하기 위해 map() 함수를 사용합니다. map() 함수는 배열에 들어있는 각 요소에 어떤 처리를 한 뒤 리턴하는 것으로 이해하면 됩니다. // doubled = [2, 4, 6, 8, 1..

Shared State shared state는 말 그대로 공유된 state를 의미합니다. 자식 컴포넌트들이 가장 가까운 공통된 부모 컴포넌트의 state를 공유해서 사용하는 것이죠. shared state는 어떤 컴포넌트의 state에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우를 말합니다. 예를 들어 부모 컴포넌트에 섭씨 온도를 가지고 있고 자식 컴포넌트가 화씨 온도로 표현하는 컴포넌트인 경우, 자식 컴포넌트가 온도 값을 가지고 있을 필요 없이, 그냥 부모 컴포넌트의 state에 있는 섭씨 온도 값을 변환해서 표시해주면 됩니다. 하위 컴포넌트에서 State 공유하기 1. 물의 끓음 여부를 알려주는 컴포넌트 먼저 섭씨 온도 값을 props로 받아서 물이 끓는지 안 끓는지를 문자열..

조건부 렌더링이란? 조건부 렌더링은 어떠한 조건에 따라서 렌더링이 달라지는 것을 의미합니다. 아래 예제를 봅시다. function UserGreeting(props) { return 다시 오셨군요!; } function GuestGreeting(props) { return 회원가입을 해주세요.; } UserGreeting 컴포넌트는 이미 회원인 사용자에게 보여줄 메시지를 출력하고, GuestGreeting 컴포넌트는 아직 가입하지 않은 사용자에게 보여줄 메시지를 출력합니다. 다음 예제에서 조건부 렌더링을 사용하여 이를 구현합니다. function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return ; } retur..

이벤트 처리하기 DOM에서는 이벤트를 등록하기 위해 html 태그의 onclick 과 같은 속성을 사용하여 이벤트 처리 함수를 등록합니다. Activate 리액트에서는 onclick이 onClick으로 바뀌고 이벤트 처리 함수를 문자열이 아닌 함수 그대로 전달하는 점이 다릅니다. Activate 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수를 이벤트 핸들러 또는 이벤트 리스너라고 부릅니다. 리액트에서 이벤트 핸들러를 추가하는 방법을 알아보기 위해 아래 예제를 봅시다. class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // callback에서 `this`를 사용하..

1. 훅이란 무엇인가? 기존 함수 컴포넌트는 클래스 컴포넌트와 다르게 코드도 굉장히 간결하고, 별도로 state를 정의해서 사용하거나 컴포넌트의 생명주기에 맞춰 어떤 코드가 실행되도록 할 수 없었습니다. 따라서 함수 컴포넌트에 이런 기능을 지원하기 위해서 나온 것이 바로 훅입니다. 훅을 사용하면 함수 컴포넌트도 클래스 컴포넌트의 기능을 모두 동일하게 구현할 수 있게 되는 것이죠. Hook이라는 영단어는 보통 프로그래밍에서 원래 존재하는 어떤 기능에 마치 갈고리를 거는 것처럼 끼어 들어가 같이 수행되는 것을 의미합니다. 리액트 훅도 마찬가지로 리액트의 state와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 것입니다. 훅의 이름은 모두 use로 시작합니다. 개발자가 직접 커스..

1. State State란? 리액트에서 state는 리액트 컴포넌트의 변경 가능한 데이터를 의미합니다. state는 사전에 미리 정해진 것이 아니라 리액트 컴포넌트를 개발하는 각 개발자가 직접 정의해서 사용하게 됩니다. state를 정의할 때 중요한 점은 꼭 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다는 것입니다. 왜냐하면 state가 변경될 경우 컴포넌트가 리렌더링되기 때문에 데이터 흐름에 관련 없는 값을 포함하면 컴포넌트가 다시 렌더링되어 성능을 저하시킬 수 있습니다. 데이터 흐름과 관련이 없는 값은 컴포넌트 인스턴스의 필드로 정의하면 됩니다. State의 특징 리액트의 state는 그냥 하나의 자바스크립트 객체입니다. class LikeButton extends React...