🥬 상추의 공간

미션VSCode, Node.js, git 설치 및 github 계정 만들기해당 과정은 이미 되어있어서 통과했다. CRA(Creat React App) 활용해서 프로젝트 생성create-react-app은 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 간편하게 프로젝트 작업 환경을 구축해주는 도구다. 아래 명령어를 통해 실행시킬 수 있다.npx create-react-app [폴더이름] 위 과정이 완료되면 지정한 이름의 프로젝트 폴더가 생성된 것을 확인할 수 있다.해당 디렉토리로 이동하고 아래 명령어를 입력하면 react 개발 전용 서버를 구동시킬 수 있다.npm start 심화 미션실제 면접 질문에서 자주 물어보는 내용이다. 아래와 같은 내용의 면접 질문을 받았을 ..

props는 부모에서 자식 Component로 데이터를 전달하고자 할 때 사용할 수 있다. 일반적으로 고정적인 데이터 값을 전달할 때 사용한다. state는 고정적인 데이터가 아닌, 변경될 수 있는 데이터를 처리할 때 효율적으로 사용된다. 다른 말로, 하나의 웹 사이트가 구상된 이후에도 내부적인 데이터가 계속해서 변경될 수 있는 경우(내부 객체 값이 변경될 여지가 있는 경우)에 효과적으로 사용된다. state 값을 변경해서 화면(view)이 변경되면 render() 함수가 다시 실행되어 실제 화면에 적용해준다. props만 이용하고자 한다면 함수형 컴포넌트를 사용했다. 그러나 state를 사용한다면 Class형 컴포넌트로 사용해야한다. 아래 코드는 3강에서 사용한 시계 코드이다. function tick..

React에서 Component는 JavaScript 함수와 흡사하다고 보면 된다. 어떠한 내용을 화면에 그려줄 지에 대해 정의하고 있는 JavaScript 함수 같은 거라고 이해하면 된다. 이러한 Component는 Props를 부모로부터 입력받아서 결과적으로 화면에 어떤 내용을 그릴지 React Element를 반환하는 형태로 동작한다. Props는 Property(속성)의 약자다. 객체 지향 프로그래밍에서 사용하는 '속성'의 의미와 동일하다. 부모 Component에서 자식 Component로 다양한 속성들을 정의해서 보내줄 수 있다. Props를 이용하여 React Component는 계층적으로 본다. 아래 두 코드는 동일한 기능을 수행한다. Component를 변수로 저장해서 render시켰냐의..

JSX JavaScript 문법의 확장판 react에서의 요소(Element)를 제공 요소는 tag 같은 것들을 모두 포함하는 HTML 단위이다. 마치 js와 html을 한 번에 합쳐 놓은 것 같은 문법 코드1 분석 function formatInfo(student){ return student.name + "["+student.id+"]"; } const student = { id: "20212195", name: "Lee Sanghee", color: "blue", } const element = ( {formatInfo(student)} ); element 변수에는 HTML 태그와 문자열이 포함되어 있는데, 이들이 JSX이다. html 코드 안에서 어떤 부분이 js코드임을 알리기 위해 중괄호를 사용..

코드펜(Codepen) 로컬이 아닌, 웹 상에서 빠르고 효과적으로 코드를 테스트 할 수 있는 사이트 코드펜에서 React 사용하는 법 먼저 파일을 만들고(New Pen) 다음 단계를 따라가면 된다. setting 클릭 JS 클릭 JavaScript Preprocessor에서 'Babel' 선택 Add External Scripts/Pens 에서 'react', 'react-dom' 검색하여 추가 Save & Close 버튼 클릭 babel: jsx 등의 기능을 이용할 수 있음 react: component 같은 기능 처리하도록 도와주는 라이브러리 react-dom: 웹 문서의 dom에 렌더링을 진행하는 라이브러리 기본적으로 웹 문서는 dom을 갖고 있다. > dom에 접근해서 다양한 웹사이트 화면을 그리..

React란? 개발하고자 하는 웹 사이트의 UI(화면, view)를 효과적으로 만들 수 있도록 도와주는 JavaScript 기반 *라이브러리 **라이브러리 : 프로그래밍을 작성하는 과정에 있어서 특정한 기능을 도와주는 함수들의 집합, 각각 함수들은 독립적으로 작동하므로 필요한 함수만 호출하여 쓸 수 있다. 특징 선언적 - 대화형 UI 작성에 유리, 데이터가 변경되었을 때 효율적으로 렌더링 수행 컴포넌트 기반 - 캡슐화된 컴포넌트가 상태관리 및 UI 구성 재활용에 굳 장점 *클라이언트 렌더링과 *서버 사이드 렌더링 지원 **클라이언트 렌더링: 웹사이트에서 어떠한 데이터를 받아옴에 있어서, 필요할때 그때그때 데이터를 받아오는 방식 **서버 사이드 렌더링: 미리 웹사이트 화면에 필요한 요소들을 서버 쪽에서 미..