Will's Log

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

Create-React-App 사용 방법 및 폴더 구조 정리 오늘은 Create-React-App 사용방법 및 생성된 React 앱 내 파일들은 어떤게 있는지, 역할은 무엇인지 한번 파헤쳐 보고자 한다. 평소 React 개발 시 Create React App을 통해 React 앱을 템플릿을 만들어 개발을 시작했다. 다들 마찬가지겠지만 아래 명령어를 이용하면 된다. npx create-react-app my-app cd my-app npm start 위 명령어로 만들어진 my-app 폴더에 들어가보면 아래와 같은 폴더와 파일이 있다. 나는 이 중에 App.js, index.js 파일을 주로 개발했었고 그 외 다수 파일들은 삭제하곤 사용했다. 그러다 문득 적어도 '기본 파일들은 알고 사용하는게 맞지 않을까?..

안녕하세요, 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 ..