Loading...
2023. 1. 12. 01:20

리액트 기본 배우기 -state에 대하여-

1. state란 무엇인가 리액트에서 state는 리액트 컴포넌트의 상태 상태라는 단어가 정상이냐, 비정상이냐를 나타내는 것보다는 리액트 컴포넌트의 데이터라는 의미에 더 가깝다. 리액트 컴포넌트의 변경 가능한 데이터를 state라고 부른다. state는 사전에 미리 정해진 것이 아니라, 리액트 컴포넌트를 개발하는 개발자가 직접 정하는 것이다. state를 정의할 때 중요한 점은 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다는 점이다. state가 변경될 경우 컴포넌트가 재렌더링되기 때문에, 렌더링과 데이터 흐름에 관련 없는 값을 포함시키면, 컴포넌트가 다시 렌더링되어 성능을 저하 시킬 수 있다. 그래서 렌더링과 데이터 흐름에 관련 있는 값만 state에 포함하도록 해야하며, 그렇지 ..

2023. 1. 9. 22:56

react 기본 익히기 -JSX에 대하여-

1. JSX A syntax extension to JavaScript "자바스크립트의 확장 문법" 자바스크립트의 문법을 확장시킨 것 JavaScript와 XML/HTML을 합친 것 JSX의 X는 extension의 X로 볼 수도 있지만 실제로는 JavaScript and XML의 앞 글자를 따서 JSX라고 부르는 것 1-1) 예시 다음은 간단한 JSX 코드 대입연산자 =의 오른쪽에 특이하게 HTML코드가 나온다 HTML의 태그를 사용해 Hello, world!라는 문자열을 값으로 갖고 있다 const element = Hello, world!; 결과적으로 자바스크립트 코드와 HTML 코드가 결합되어 있는 JSX 코드가 된다. 이 코드가 하는 역할은 태그로 둘러싸인 문자열을 element라는 변수에 저장..

2023. 1. 9. 22:51

react 기초 익히기 -기본 적용법, create-react-app-

1. 정의 react 공식 웹사이트에서는.. A JavaScript library for building user interfaces "사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리" - 라이브러리 = "자주 사용되는 기능을 정리해 모아 놓은 것" 1-1) 사용자 인터페이스(user interface) UI로 줄여서 부른다 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간에 입력과 출력을 제어해주는 것 웹사이트에서 버튼, 텍스트 입력창 등이 모두 UI 버튼을 눌러 웹사이트에서 반응을 하고, 웹사이트에서 특정 페이지를 보여주어서 사용자들이 반응을 함 1-2) SPA(single page application) 하나의 페이지만 존재하는 웹사이트, 애플리케이션 수백 개의 웹페이지..