본문 바로가기

Programming310

[React] State - 함수형 컴포넌트의 state와 주의점 지난번에 클래스형 컴포넌트의 state를 다뤘습니다. 이번엔 함수형 컴포넌트의 state를 다룰 차례입니다. 함수형 컴포넌트에서는 바로 state에 접근할 수 없고 useState 함수를 통해서 state에 접근할 수 있습니다. 1. useState useState 함수는 함수형 컴포넌트에서 state를 조작할 수 있게 해주는 기능입니다. useState는 Hooks 기능 중 하나입니다. useState 함수가 처음 만나게되는 Hooks 가 되겠네요. 이것을 배우기 위해 '배열 비구조화 할당'이란것을 사용하겠는데, 이것에 대한 설명은 아래를 참조해주세요. https://bamtory29.tistory.com/entry/Javascript-%EA%B5%AC%EC%A1%B0-%EB%B6%84%ED%95%B4.. 2021. 11. 3.
[React] State - state의 소개와 클래스형 컴포넌트의 state 지난 포스트에서는 컴포넌트의 속성인 props를 공부했었습니다. 이번에 배우는 stete는 컴포넌트 내부에서 변경될 수 있는 값입니다. 1. state state는 컴포넌트 내부에서 바뀔 수 있는 값 입니다. props와의 차이점은 props는 컴포넌트에서 사용되기 위해 부모 컴포넌트가 설정해주는 값이기에 값을 바꾸기 위해서는 부모 컴포넌트에서만 접근했어야 합니다. 그래서 props는 마치 함수의 인자 처럼 외부에서 컴포넌트로 전달 되었습니다. 반면 state는 현재 컴포넌트에서 값이 바뀔 수 있다는 차이점이 있습니다. 그래서 state는 마치 함수(클래스) 내부에서 선언되어 사용되는 변수처럼 컴포넌트 내부에서 자유롭게 이용할 수 있습니다. 또 이전에 함수형과 클래스형 컴포넌트를 소개하면서 state 사.. 2021. 11. 3.
쿠키와 세션 인터넷을 하다보면 가끔씩 우리는 인터넷 기록 삭제를 할 때가 있습니다. 이때 종종 접하는 단어가 '쿠키 삭제'로 쿠키를 지우는 것이라고 합니다. 또 연결을 하다보면 세션이라는 단어도 많이 듣게됩니다. 이처럼 인터넷을 하다가 자주 만나는 쿠키와 세션이 무엇일까요? 1. 쿠키 1-1. 쿠키의 개념 쿠키(cookie)는 웹 사이트에 방문할 때 생기는 여러 정보들을 담아 브라우저에 저장되는 임시 저장 파일입니다. 사용자가 사이트에 접속하면 브라우저에 정보를 담아뒀다가 재방문을 하게 될 경우 서버로 다시 쿠키를 보내서 하던 작업을 이어서 할 수 있게 해주는 개념입니다. 즉, 쿠키는 클라이언트에 저장되는 브라우저 정보라고 할 수 있습니다. 쿠키는 브라우저마다 다른 정보를 저장합니다. 다시 말하면 내가 크롬을 이용하.. 2021. 11. 3.
[React] props - 클래스형 컴포넌트 지난번에 주로 쓰게 될 함수형 컴포넌트에서 props 사용법을 배웠다면, 이번엔 클래스형 컴포넌트에 대해서 간단하게 알아보겠습니다. props에 대한 기초적인 설명은 함수형 컴포넌트 props의 설명을 참조해 주세요. 2021.11.02 - [Programming/React] - props - 함수형 컴포넌트 props - 함수형 컴포넌트 리액트의 컴포넌트 속성을 설정하는 props에 대해 공부해보겠습니다. 1. props props는 properties의 줄임 표현으로 말 그대로 속성입니다. 즉 props는 컴포넌트의 속성을 관리하는데 사용되는 요소라고 bamtory29.tistory.com 1. 클래스형 컴포넌트 사용 클래스형 컴포넌트에서 props를 이용하는 방식은 함수형과 다르지 않습니다. 우선 .. 2021. 11. 2.
[React] props - 함수형 컴포넌트 리액트의 컴포넌트 속성을 설정하는 props에 대해 공부해보겠습니다. 1. props props는 properties의 줄임 표현으로 말 그대로 속성입니다. 즉 props는 컴포넌트의 속성을 관리하는데 사용되는 요소라고 볼 수 있습니다. props의 설정은 속성을 설정할 컴포넌트가 아닌 컴포넌트를 불러와서 이용하는 부모 컴포넌트에서 설정한다는 점을 주의해야합니다. props는 함수형 컴포넌트에서 인자(Parameter)로 받아와서 이용할 수 있습니다. 인자로 받아온 props는 사용할 때 JSX의 자바스크립트 표현식 {}을 이용합니다. 인자를 지정하고 .으로 인자의 요소를 지정합니다. import React from 'react'; const PropsPractice = props => { return .. 2021. 11. 2.
[React] 컴포넌트 만들기 이제 App.js라는 만들어진 컴포넌트에서 벗어나 직접 컴포넌트를 하나 만들어 보겠습니다. 1. 컴포넌트 만들기 컴포넌트를 만들기 위해서 src 디렉토리 내부에 새 파일을 만들어 줍니다. 저는 분리를 위해 src 아래에 새로운 디렉토리를 만들고 그 안에 컴포넌트들을 모으기로 했습니다. 컴포넌트를 만들때 주의사항은 자바스크립트와 다르게 컴포넌트 파일명이나 컴포넌트명을 PascalCase 방식으로 명명해야한다는 점 입니다. 새 파일을 만들고 다음과 같이 작성합니다. 코드 자체는 자바스크립트와 다른점이 없기 때문에 설명은 따로 없습니다. import React from 'react'; const FirstComponent = () => { return 처음으로 만들어 본 컴포넌트 입니다. }; export d.. 2021. 11. 2.
300x250

티스토리툴바