사실 예발자 프로젝트는 앱 규모가 복잡하지 않고, 동적으로 state 값이 변할 일이 없기 때문에 굳이 상태관리 라이브러리가 필요 없을수도 있겠지만, 편리함을 경험해보자는 취지로 redux를 사용해보기로 했다.

일단 한번 중괄호 안에 들어가면 변수를 읽기 위해 중괄호를 추가로 넣을 필요가 없다. props를 참조하기 위해 중괄호를 더 쓸 필요도, 이유도 없는 것이다!

리액트에서 if문을 사용하려면 즉시실행함수 형태로 사용해야하기 때문에 AND연산자가 훨씬 간편한 방법이 될 수 있다.

JSX에서 <br/>태그를 사용하면, 적용되지 않은 채 문자열 그대로 렌더링 된다. React는 무조건 텍스트형태로만 페이지를 렌더링하도록 설계되어있기 때문이다.

더미데이터를 만들어 컴포넌트에 데이터를 전달해보고, map()을 이용해 더 계층적인 컴포넌트로 리팩토링 해보면서 느낀점들.

CSS, React 라이브러리 및 템플릿을 component화 시켜 예발자닷컴 메인 페이지를 반응형으로 디자인했다.

사용자가 알 필요가 없는 데이터를 내부에서 은닉하는 것. 즉, 캡슐화를 통해 코드를 리펙토링 하는 것이 좋은 사용성을 만드는 핵심이다.

마치 HTML 태그의 속성처럼, 한 컴포넌트의 요소에 props value를 지정하면 다른 컴포넌트에서 그 value에 값을 넣어 사용할 수 있는 것이다.

App.js 파일의 App 컴포넌트 구조를 참고해 새로운 컴포넌트를 만들고, 파일로 분리해 관리한다.

새로운 React앱을 생성하면 여러 폴더와 파일들이 생기는데, 그중 가장 핵심이 되는 파일은 다음 3가지 이다.

form 내부의 button를 submit하면 클릭과 엔터가 동시에 입력된다. 이걸 이용해서 form 태그에 이벤트를 등록해, 클릭을 하든 엔터를 누르든 같은 이벤트로 취급할 수 있다.

즉, js파일에 발생했을 때 실행 되어야 하는 함수를 짜면 브라우저는 그 이벤트가 발생했을 때 등록된 코드를 실행하게 된다. 이런 방식을 이벤트 프로그래밍이라고 한다.

웹브라우저로부터 POST method로 전송받은 데이터를 파일로 저장하고, 작성한 글과 내용을 볼 수 있는 페이지로 Redirection하는 방법을 정리했다.

실제로 웹 서버를 만들때는 쿼리스트링을 먼저 지정하고 그 쿼리스트링으로 URL을 연결한다. 하지만 이 우리의 목적은 쿼리스트링을 읽고 다루는 방법을 학습하는것이기 때문에, 반대로 URL에서 쿼리스트링 데이터을 parse(추출)하는 방법을 알아볼 것이다.

이 글은 단순히 두 언어 문법의 차이을 비교한다. 자바스크립트의 문법이 C와 많이 유사한 것 같아서, 약간 다른 표현법 정도만 정리해두면 쉽게 외울 수 있을 것 같다.