소소한 기록

컴포넌트라는 말이 조금 어렵게 느껴질지 모르겠습니다. 구성요소, 부품, 레고블록 등의 여러 해석 중에 '부품'이라는 말을 쓰면 좋을 것 같습니다. 부품들을 조립해서 물건을 만드는 것처럼, 컴포넌트를 조립해서 프로그램을 완성할 것이기 때문이죠. 리액트에서 사용하는 컴포넌트는 HTML로 대체되는 부품입니다. javascript를 사용해서 부품 기능을 만들고, CSS를 이용해서 부품을 예쁘게 만듭니다. 잘 만든 부품들을 조립해서 최종결과물을 만듭니다. 자동차를 만들 때 엔진, 에어컨, 바퀴등을 각각 만들어서 하나로 조립하는 걸 생각하시면 됩니다. 다만 실제 자동차 조립과 다른 점은 실제 자동차는 바퀴를 네 개 만들어야 하지만, 프로그래밍에서는 하나의 바퀴 컴포넌트를 만들어서 무한대의 바퀴를 만들어 쓸 수 있습..

JSX(JavaScript for XLM)는 javascript 구문을 조금 확장한 것이라고 생각하시면 됩니다. HTML과 javascript를 섞어서 쓸 수 있습니다. 주로 리액트에서 많이 사용됩니다. 예전에는 웹을 만들 때, 화면구조와 내용은 HTML, 디자인은 CSS, 로직은 javascript로 나눠서 만들었습니다. 파일도 별도로 관리됐죠. 그런데 웹이 더 복잡해지고, 상호작용도 많아지면서, 로직에 따라 다른 HTML을 보여주는 상황이 늘어났습니다. 그래서 javascript가 바로 HTML을 다룰 수 있도록 JSX가 나타났습니다. // JSX 구문 const element = ( Hello, world! ); // javascript 구문 const element = React.createEle..

리액트 초보라는 말이 맞는 말인지 잘 모르겠습니다. 리액트를 배우려면 기본적으로 알고 있어야 하는 게 많기 때문이죠. 리액트에 대해 아무것도 몰랐을 때, 프로젝트에 투입이 된 적이 있었습니다. 여러 기술이 마구 섞인 코드는 암호문에 가까웠습니다. 암호문을 해독하는데, 오랜 시간이 걸렸습니다. 그래서 오늘은 리액트 공부 전에 알아두면 좋을 5가지를 알아보도록 하겠습니다. 1. 자바스크립트 라이브러리다. 지금은 바뀌었는데, 이전 리액트 공식 홈페이지 첫화면에 크게 적혀있던 내용이었습니다. 라이브러리는 해당언어로 만들어 놓은 함수들의 집합을 말합니다. 리액트가 자바스크립트 라이브러리라는 건 리액트는 곧 자바스크립트라는 말입니다. 리액트 = 자바스크립트 이 말은 리액트를 하기 위해서는 자바스크립트 관련 지식이 ..

JSX는 리액트에서 화면을 표시할 때 사용하는 문법입니다. const element = Hello, world!; 구조는 이렇게 생겼죠. 윗줄이 다 JSX가 아니고 Hello, world! 이 부분만 JSX문법입니다. HTML과 똑같이 생겼죠? HTML과 다른 점은 JSX내에 중괄호({})를 이용해서 값을 입력할 수 있다는 것입니다. const name = 'Josh Perez'; const element = Hello, {name}; 이렇게 사용할 수 있습니다. function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; cons..

공식 사이트 : https://reactjs.org/docs/thinking-in-react.html 리액트는 우리생각에 가장 빠르고, 크게 웹앱을 개발할 수 있는 최상의 방법입니다. 페이스북과 인스타그램에서 우리를 위해 아주 잘 확장되었습니다. 리액트의 많은 훌륭한 부분들 중 하나는 앱을 빌드할 때 앱을 생각하게 만드는 방법입니다. 이 문서에서 우리는 검색가능한 물품데이터 테이블을 만드는 절차를 생각해보면서 살펴볼 것입니다. 임시 디자인으로 시작 생각해보세요. 우리가 이미 디자이너로부터 JSON API와 mock을 받았다고 말이죠. 임시 디자인은 다음과 같습니다. 우리의 JSON API는 아래와 같은 데이터를 리턴합니다. [ {category: "Sporting Goods", price: "$49.99..

공식 사이트 : https://reactjs.org/docs/composition-vs-inheritance.html 리액트는 파워풀한 구성 모델을 가지고 있습니다. 그래서 컴포넌트들 사이에 코드 재사용을 위해 상속을 사용하기보다는 구성을 사용하는 것을 추천합니다. 이번 섹션에서는 리액트를 처음 접하는 개발자가 종종 상속에 도달하는 문제를 고려해보고, 이를 구성으로 어떻게 해결하는지를 보여줄 것입니다. containment 몇몇 컴포넌트들은 자식을 미리 알지 못합니다. 이것은 특히 Sidebar나 Dialog와 같이 일반적인 박스를 표현하는 컴포넌트에 공통적으로 나타납니다. 리액트에서는 컴포넌트가 자식 앨리먼트를 직접 그들의 출력으로 전달하기 위해서, 특별한 자식 prop를 사용하는 것을 추천합니다. f..

공식 사이트 : https://reactjs.org/docs/lifting-state-up.html 종종 몇몇 컴포넌트들은 같은 데이터 변화를 반영할 필요가 있습니다. 이때는 state를 가장 가까운 공통 조상으로 올려서 공유하는 것을 추천합니다. 그럼 어떻게 작업하는지 알아보겠습니다. 이번 섹션에서는 주어진 온도에서 물이 끓는지 알아보는 온도 계산기를 만들어볼 겁니다. 섭씨온도를 프로퍼티로 받고, 그 온도에서 물이 끓을 수 있는지 출력해주는, BoilingVerdict라는 컴포넌트에서부터 시작해보겠습니다. function BoilingVerdict(props) { if (props.celsius >= 100) { return The water would boil.; } return The water w..

공식 사이트 : https://reactjs.org/docs/forms.html HTML 폼 앨리먼트는 리액트의 DOM 앨리먼트와 약간 다르게 작동하기 때문에, 폼 앨리먼트는 자연적으로 몇몇 내부 상태를 유지합니다. 아래 예를 보면, 이 폼에서 순수한 HTML은 단일 이름을 받아들입니다. Name: 위의 폼은 유저가 폼을 서브밋했을 때, 새 페이지로 이동하는 기본 HTML 폼을 가지고 있습니다. 리액트에서 이 동작을 수행하길 원한다면, 그냥 동작합니다. 그러나 대부분의 케이스에서, 폼을 제출하고, 사용자가 입력한 데이터에 액세스할 수 있는 자바스크립트 함수가 있다면 편리합니다. 이걸 이루기 위한 표준적인 기술을 "콘트롤 된 컴포넌트" 라고 부릅니다. 제어된 컴포넌트 HTML에서 ,,와 같은 폼 앨리먼트는..

공식 사이트 : https://reactjs.org/docs/lists-and-keys.html 먼저 자바스크립트에서 리스트를 어떻게 변형시키는지 살펴보겠습니다. 아래의 코드는 배열에서 값을 가져오고, 그 값을 두배로 만드는데 map() 함수를 사용합니다. map() 함수에 의해 리턴된 값을 새로운 배열에 할당하고, console.log() 함수를 이용해 내용을 출력해봅니다. const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); console.log(doubled); 이 코드는 콘솔에 [2, 4, 6, 8, 10]을 출력합니다. 리액트에서 배열을 앨리먼트의 리스트로 변형하는 것은 위 방식과 거의 동일합니다..

공식사이트 : https://reactjs.org/docs/conditional-rendering.html 리액트에서 각각의 캡슐화된 컴포넌트를 만들어 state의 상태에 따라 필요한 컴포넌트를 랜더링 할 수 있습니다. 리액트의 조건적 랜더링은 자바스크립트의 조건식과 같은 방식으로 작동합니다. 다음 두개의 컴포넌트를 살펴보겠습니다. function UserGreeting(props) { return Welcome back!; } function GuestGreeting(props) { return Please sign up.; } 이제 사용자의 로그인 상태에 따라 다른 인사를 보여주는 Greeting 컴포넌트를 만들어 보겠습니다. function Greeting(props) { const isLogged..