반응형

react 2

[React] 컴포넌트란? 컴포넌트 핵심 개념 한방에 정리!

안녕하세요, Will입니다. 오늘은 React의 컴포넌트에 대해 파헤치는 시간입니다. 컴포넌트가 무엇인지, 왜 중요한 지에 대해 이론적으로 접근해보고 그걸 가능하게 해주는 리액트의 기능은 무엇인지에 대해 알아보겠습니다. 다음 포스팅에선 실제 컴포넌트를 사용하는 방법에 대해 설명해보겠습니다. 컴포넌트란? 왜 리액트는 컴포넌트라는 핵심 개념 하나로 설명이 될까요? 그건 리액트로 개발하는 모든 것이 컴포넌트이기 때문이에요. 모든 것이 컴포넌트다 아래 TodoList 이미지를 봐주세요. 위 예제는 제가 React로 만들어본 TodoList 예제입니다. 포스트 잇이 붙어있는 학교 게시판을 모티브로 만들었어요. 맨 위에 제목이 있고, 아래엔 포스트 잇이 다닥다닥 붙어있는 모습이에요. 혹시 이미지에 표시한 빨간 박스..

React 2023.10.12

[React] JSX란 대체 무엇인지? JSX 정의 및 문법 파헤치기

안녕하세요, Will 입니다. 오늘은 JSX가 무엇인지, 어떻게 사용하는지에 대해 작성해 보도록 하겠습니다. JSX란? JSX는 Javascript의 확장 문법으로 Javascript XML의 줄임말이에요. React 팀에서 직접 고안한 문법이구요, React 개발을 위해 Javascript와 HTML을 섞어서 사용하는 문법입니다. JSX는 사용자 인터페이스 개발을 쉽고, 편하게 가능하게 해줍니다. 쉽게 얘기해서 사용자 지정 HTML이라고도 할 수 있겠습니다. 코드를 보시면 좀 더 이해가 쉬우실 거에요. 아래 코드는 CRA로 처음 프로젝트를 생성했을 때 코드입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 import logo ..

React 2022.12.07
반응형