sudong-d 님의 블로그

Shared Stateshared state는 말 그대로 공유된 state를 의미한다 자식 컴포넌트들이 가장 가까운 공통된 부모 컴포넌트의 state를 공유해서 사용하는 것이다 shared state는 어떤 컴포넌트의 state에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우를 말한다   위 BoilingVerdict() 컴포넌트는 섭씨온도 값을 props로 받아서 100도 이상이면 끓는다는 문자열을 출력하고 그 외에는 물이 끓지 않는다는 문자열을 출력한다  위 Calculator() 컴포넌트는 state로 온도 값을 하나 갖고 있다 또한 사용자로부터 입력을 받기 위해서 태그를 상요한다 (은 로 간주)사용자가 온도 값을 변경항 때마다 handleChange() 함수가 호출되고, s..

폼이란폼을 우리말로 하면 양식이라는 뜻을 갖고 있다 예를 들어 회원가입을 하거나 로그인을 할 때 텍스트를 입력하는 양식을 많이 볼 수 있는데 텍스트 입력뿐만 아니라 체크박스나 셀렉트 등 사용자가 무언가 선택을 해야 하는 것 모두를 폼이라고 생각하면 된다 정리하면 폼은 사용자로부터 입력을 받기 위해 사용하는 것이다  위 코드는 기본적인 HTML 폼이다 사용자의 이름을 입력받고 제출하는 간단한 코드이다 이 코드는 리액트에서도 잘 작동하지만 자바스크립트 코드를 통해 사용자가 입력한 값에 접근하기엔 불편한 구조이다 제어 컴포넌트제어 컴포넌트는 사용자가 입력한 값에 접근하고 제어할 수 있도록 해 주는 컴포넌트이다 이름 그대로 누군가의 통제를 받는 컴포넌트인데 여기서 누군가가 리액트이다 정리하면 제어 컴포넌트는 그..

리스트와 키리스트는 우리말로 목록이다 컴퓨터 프로그래밍에서는 같은 아이템을 순서대로 모아 놓은 것이 리스트에 해당한다고 볼 수 있다 리스트를 위해 사용하는 자료구조가 배열이다 배열은 자바스크립트의 변수나 객체를 하나의 변수로 묶어놓은 것이다 키는 열쇠라는 의미를 갖고 있고 각 객체나 아이템을 구분할 수 있는 고유한 값을 의미한다 map()map() 함수는 배열에 들어 있는 각 변수에 어떤 처리를 한 뒤 리턴하는 것이다  위 코드는 map() 함수를 사용하여 numbers 배열에 들어 있는 각 숫자에 2를 곱한 값이 들어간 doubled라는 배열을 생성하는 코드이다 이처럼 map() 함수는 배열의 첫 번째 아이템부터 순서대로 각 아이템에 어떠한 연산을 수행한 뒤에 최종 결과를 배열로 만들어서 리턴해 준다고..

조건부 렌더링 Conditional Rendering을 조건에 따른 렌더링이라고 해석하고 일반적으로 조건부 렌더링이라고 줄여서 부른다조건부 렌더링은 어떠한 조건에 따라서 렌더링이 달라지는 것을 의미한다  UserGreeting과 GuestGreeting 이라는 두 개의 함수 컴포넌트가 있다 회원과 회원이 아닌 사용자에게 보여줄 메세지가 다르기 때문에 선택적으로 보여줘야한다   위 Greeting 컴포넌트는 isLoggedIn 이라는 변수의 값이 true에 해당되는 값이면 UserGreeting 컴포넌트를 리턴하고, 그렇지 않으면 GuestGreeting 컴포넌트를 리턴하는 컴포넌트이다 props로 들어오는 isLoggedIn의 값에 따라서 화면에 출력되는 결과가 달라지게된다 엘리먼트 변수엘리먼트 변수는 ..

어떤 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수가 있는데 이것을 이벤트 핸들러라고 부른다 또는 이벤트가 발생하는 것을 계속 듣고 있다는 의미로 이벤트 리스너라고 부르기도 한다 지금은 클래스 컴포넌트를 거의 사용하지 않고 함수 컴포넌트를 주로 사용한다    Toggle 이라는 함수 컴포넌트이다 위 코드처럼 함수 안에 또 다른 함수로 정의하는 방법과 아래 코드처럼 arrow function을 사용하여 정의하는 방법이 있다  버튼을 클릭하면 handleClick()이 호출되어 isToggleOn의 값을 반전시키고 state값이 바뀌고 컴포넌트가 재렌더링 되면서 버튼의 문자열이 바뀐다  리액트에서는 카멜 표기법을 사용하는데 카멜 표기법은 첫 글자는 소문자로 시작하되, 중간에 나오는 새로운 단어의 첫 글자..

Hook기존에 함수 컴포넌트는 클래스 컴포넌트와는 다르게 state를 정의해서 사용하거나 컴포넌트의 생명주기에 맞춰 어떤 코드가 실행되도록 할 수 없었지만 훅이 나오고, 훅을 사용하면 함수 컴포넌트도 클래스 컴포넌트의 기능을 모두 동일하게 구현할 수 있게 됐다 Hook이라는 영단어는 갈고리라는 뜻을 갖고 있는데, 보통 프로그래밍에서는 원래 존재하는 어떤 기능에 마치 갈고리를 거는 것처럼 끼어 들어가 같이 수행되는 것을 의미한다리액트의 훅도 마찬가지로 리액트의 state와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 것이다 useState기본적으로 함수 컴포넌트에서는 state라는 것을 제공하지 않기 때문에 클래스 컴포넌트처럼 state를 사용하고 싶으면 useState() ..

State state란 영단어 상태라는 뜻을 가지고 있고 리액트에서는 리액트 컴포넌트의 상태를 의미한다 하지만 상태라는 게 정상인지 비정상인지 나타내는 것이라기보다는 리액트 컴포넌트 데이터라는 의미에 더 가깝다쉽게 말하면 리액트 컴포넌트의 변경 가능한 데이터를 state라고 부른다 state는 사전이 미리 정해진 것이 아니라 리액트 컴포넌트를 개발하는 각 개발자가 직접 정의해서 사용한다여기서 중요한 점은 꼭 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다왜냐하면 state가 변경될 경우 컴포넌트가 재렌더링되기 때문에 성능을 저하시킬 수 있기 때문이다 리액트 state는 따로 복잡한 형태가 있는 것이 아니라 하나의 자바스크립트 객체라고 기억하면 된다  LikeButton이라는 클래스 컴..

컴포넌트앞서 리액트는 컴포넌트 기반이라는 중요한 특징이 있고 컴포넌트는 여러 개의 컴포넌트의 조합으로 구성될 수 있다또 이러한 컴포넌트들을 마치 레고 블록을 조립하듯이 끼워 맞춰서 새로운 컴포넌트를 만들 수 있다 리액트 컴포넌트는 개념적으로 입력을 받아서 출력을 내뱉는 자바스크립트의 함수와 비슷하다 리액트 컴포넌트도 어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴해 주는 것이다만들고자 하는 대로 props(속성)를 넣으면 해당 속성에 맞춰 화면에 나타날 엘리먼트를 만들어 준다 propsprops는 prop의 복수형이고 prop은 property라는 영단어를 줄여서 쓴 것이다 property는 '속성', '특성이라는 뜻을 가지고 있고, 리액트에서는 리액트 컴포넌트의 속성을 말한다..

Element라는 영단어는 요소, 성분이라는 뜻을 가지고 있다리액트에서는 앱을 구성하는 가장 작은 블록들을 엘리먼트라고 부른다 리액트 엘리먼트는 자바스크립트 객체로 되어있는데 이 객체를 createElement() 함수가 만든다  createElement() 함수에는 세 가지 파라미터가 있는데 차례로type : HTML 태그 이름이 문자열로 들어가거나 리액트 컴포넌트props : 엘리먼트에 속성 (class,style 등)children : 해당 엘리먼트의 자식 엘리먼트가 들어간다 JSX를 사용하여 작성된 코드가 실행될 때 리액트 내부적으로 createElement() 함수를 이용하여 엘리먼트를 만든다 위 코드는 버튼을 나타내기 위한 엘리먼트이다 자바스크립트 객체로 되어있다  직접 정의한 엘리먼트가 렌더..

JSX란 자바스크립트의 확장 문법이라는 뜻으로 JavaScript와 XML/HTML을 합친 것이라고 보면 됨JSX = JavaScript and XML의 앞 글자를 따서 JSX라고 부르는 것  흔히 사용하는 자바스크립트의 대입연산자 같지만 태그를 사용한 문자열이 변수에 저장됨자바스크립트 코드와 HTML 코드가 결합된 JSX 코드 JSX는 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정을 거치므로 JSX로 코드를 작성해도최종적으로는 자바스크립트 코드가 나오게 된다  각각 JSX 코드를 사용한 코드와 사용하지 않은 코드이며, 동일한 역할을 한다 리액트에서 JSX코드를 모두 createElement() 함수를 사용하는 코드로 변환하기 때문에 JSX를 사용하는 것은 필수는 아니다 하지만 JSX를..