누구든지 하는 리액트: 초심자를 위한 리액트 핵심 강좌
이 튜토리얼은 리액트를 1도 모르는 사람들을 위해 작성되었습니다. 만약에 여러분이 리액트를 배우고 싶은데, 아직 뭐가 뭔지 잘 모르겠다! 그렇다면 이 튜토리얼을 진행하고 나면 리액트가 무엇인지, 왜 사용하는지, 그리고 어떻게 사용하는지를 알아 갈 수 있을것입니다.
이 튜토리얼은 인프런에 영상 버전으로도 올라와있습니다.…
Tag: react-anyone
누구든지 하는 리액트 10편: 앞으로의 공부 방향
이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요.
리액트는 따지고보면 정말 간단한 라이브러리입니다. 지금까지 공부해본것들을 요약해보자면..
재사용 가능한 컴포넌트를 만듭니다.
props 는 부모에게서 전달받는 값입니다.
state 는 자기 자신이 지니고 있는 데이터입니다.
props 나 state 가…
누구든지 하는 리액트: 9편 불변성을 지키는 이유와 업데이트 최적화
이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요.
우리는 지난 섹션에서 배열을 어떻게 다뤄야 하는지에 대해서 알아보았습니다. 데이터를 업데이트하는 과정에서 불변성을 지켜야한다는것을 강조했었는데요, 왜 그렇게 해야하는지 알아보겠습니다.
데이터 필터링 구현하기
우선, 불변성의 중요성을 알아보는 과정에서 이름으로…
누구든지 하는 리액트 8편: 배열 다루기 (2) 제거와 수정
이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요.
우리는 지난 섹션에서 배열에 데이터를 추가하는 방법과 배열 내부의 내용들을 화면에 보여주는 기능을 구현해보았습니다. 이번에는, 배열 내부의 데이터를 제거하는 방법과 수정을 하는 방법을 알아보겠습니다.
일단 제거부터 시작해볼까요?
데이터…
누구든지 하는 리액트 7편: 배열 다루기 (1) 생성과 렌더링
이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요.
이번에는 리액트 프로젝트에서 배열을 다루는 방법을 알아보겠습니다. 리액트에서는 배열을 다룰 때 평상시에 하던것 처럼 하시면 안 됩니다. 데이터 추가의 경우, 자바스크립트에서 배열을 다뤄보신분이라면 그냥 배열에 데이터를 추가할 때,…
누구든지 하는 리액트 6편: input 상태 관리하기
이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요.
자, 우리가 지금까지 배웠던것들을 요약해봅시다.
컴포넌트 만들기
props 와 state
LifeCycle API
딱히 배운게 그리 많지는 않죠? 그런데 이것만으로도 정말 많은 것들을 만들 수 있습니다!
리액트는, 그냥 자바스크립트와…
누구든지 하는 리액트 5편: LifeCycle API
이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요.
자 이번에는 리액트의 LifeCycle API 에 대해서 알아보겠습니다. 이 API 는 컴포넌트가 여러분의 브라우저에서 나타날때, 사라질때, 그리고 업데이트 될 때, 호출되는 API 입니다.
정말 중요한 역할을 하는데요! 한번…
누구든지 하는 리액트 4편: props 와 state
이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요.
리액트 컴포넌트에서 다루는 데이터는 두개로 나뉩니다. 바로 props 와 state 인데요, 미리 요약하여 설명드리자면 props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값입니다. 자식 컴포넌트에서는 props 를 받아오기만하고, 받아온…
누구든지 하는 리액트 3편: JSX
이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요.
리액트 컴포넌트에 대하여 조금 더 자세히 알아봅시다!
컴포넌트 파일 파헤치기
이전에 만든 hello-react 프로젝트를 열어보세요. 다음과 같이 프로젝트가 구성되어 있을 것입니다.
리액트를 사용하면 여러분의 웹 애플리케이션에서 사용하는 유저…
누구든지 하는 리액트 2편: 리액트 프로젝트 시작하기
이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요.
리액트 프로젝트는 보통 우리가 옛날에 jQuery 같은것을 단순히 <script src="..."><script> 의 형태로 불러와서 사용했던 것 처럼 사용하지는 않습니다. 그렇게 하려면 할 수 는 있는데 굉장히 제한적입니다. 그…
누구든지 하는 리액트 1편: 리액트는 무엇인가
이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요.
프론트엔드 라이브러리 / 프레임워크
리액트는 정말 인기있는 프론트엔드 라이브러리입니다. 그런데 일단, 리액트에 대해서 알아보기전에, 이 프론트엔드 라이브러리란게 정확히 뭔지, 그리고 왜 필요한건지에 대해서 알아봅시다.
일단, 여러분이 웹사이트를 만들기…