Front-End/React , Node.js10 (8) React - useEffect 사용 React 라이브러리의 Hook 중 하나인 useEffect의 사용 예시를 알아보겠습니다. useEffect는 렌더링이 될 때마다 어떤 작업을 진행시키고 싶을 경우 사용하는 Hook입니다. 1. 우선 사용하기 위해서 useState처럼 import를 해주셔야 합니다. 그 후 useEffect 문법 안에 람다식을 사용해서 콘솔로 찍어보겠습니다. 2. 먼저 태그에 값을 입력시킬 경우 렌더링을 하게 설정해두었습니다. 렌더링이 될 때마다 실행되기 때문에 우선적으로 웹페이지를 켜자마자 useEffect에 입력한 내용이 실행이 되고 태그에 값을 넣고 출력하면 다음과 같이 한번 더 렌더링이 되면서 useEffect에 입력한 내용이 실행됩니다. 3. 만약 특정 값이 새로 업데이트 될 때 마다 사용하고 싶다면 아래 보는.. 2020. 8. 14. (7-3) React - 간단한 TodoList 제작 국비과정을 통해 배운 내용을 복습하는 용도로 제작하였습니다. 작성방식이 미숙하여 이미지 캡처로 소개한 점 양해 부탁드리겠습니다.. 소스코드는 깃허브 URL에 공개해 두었습니다. https://github.com/awse2050/ReactTodo 이 예제는 이전 게시물에 이어서 포스팅합니다. 자세한 건 상단 깃허브나, 이전 게시물을 참고해주세요. 이전 파일과 동일하게 이어서 진행합니다. 1. 우선 TodoList 컴포넌트에 배열을 추가하기 위해서 arr변수를 추가합니다. 리스트 배열은 보통 추가하거나 삭제하는 등등 값이 변화가 이루어집니다. 따라서 변화된 값들을 표시하기 위해서는 렌더링이 필요하므로 useState를 사용하여 선언합니다 기본값으로는 빈 배열을 선언했습니다. 2. 이때 발생하는 문제는 배열의.. 2020. 8. 14. (7-2) React - 상위 컴포넌트에서 값 도출하기 국비과정을 통해 배운 내용을 복습하는 용도로 제작하였습니다. 작성방식이 미숙하여 이미지 캡처로 소개한 점 양해 부탁드리겠습니다.. 소스코드는 깃허브 URL에 공개해 두었습니다. https://github.com/awse2050/ReactTodo 이 예제는 이전 게시물에 이어서 포스팅합니다. 자세한건 상단 깃허브나, 이전게시물을 참고해주세요. 안녕하세요. 이전 게시물에서 컴포넌트간의 상하관계를 맺어줬었는데요. 출력하는 컴포넌트에서 직접 결과값을 도출했었습니다.이번에는 출력하는 컴포넌트 즉, 하위 컴포넌트에서 나타나는 값을 상위 컴포넌트에서 값을 도출할 수 있게해보려고합니다... Todo를 만들기 위한 과정이며 배웠던 내용의 양이 좀 많아서 단계별로 쪼개서 포스팅하려합니다. 1. 우선 Component 폴더.. 2020. 7. 27. (7-1) React - input태그 만들기 예제 국비과정을 통해 배운 내용을 복습하는 용도로 제작하였습니다.작성방식이 미숙하여 이미지 캡처로 소개한 점 양해 부탁드리겠습니다.. 소스코드는 깃허브 URL에 공개해 두었습니다. https://github.com/awse2050/ReactTodo 안녕하세요. 오늘은 리액트를 사용함에 있어서 todoList를 만드는 것이 첫 단계라고 생각합니다. 첫 단계에 들어가기에 앞서서 기존 HTML에서 사용되는 input 태그와 다르게 리액트에서 사용되는 input 태그는 좀 다르게 작동하기 때문에 todoList를 만들기 위해 꼭 알아야 하는 부분입니다.. 계획한 순서에 맞춰서 포스팅하겠습니다.!! 1. 먼저 src - Component 폴더에 새로운 폴더인 'Sample' 폴더를 만들겠습니다. 2. 이후 index... 2020. 7. 27. (6) React - 자동완성기능 툴 위처럼 리액트를 사용할때 처음에 타이핑하는 작업이 귀찮을 수 있는 분들을 위해서 수업시간에 얻어낸 확장팩이 있습니다. 좌측에 정사각형 버튼을 클릭해서 ES7 라고 쓰여있는 툴을 설치합니다. 클릭하시면 상세정보는 위와 같습니다. 설치를 하신 후에 "rafce"라고 쓰시면 미리보기식으로 자동완성되는 양식을 보실수가 있습니다. 엔터를 치시면 다음과 같이 자동으로 완성시켜서 빠르게 사용하실수 있습니다. 이외에 rfc , rafc , rfce 등등이 있으니 함수형 컴포넌트를 사용하실때는 rafce를 사용하시는 것을 추천드립니다! 2020. 7. 26. (5) React - Props 사용하기 단순히 국기 과정에서 수업받은 내용을 토대로 작성하였습니다. 태클은 언제나 환영합니다. 실력이 미숙한 관계로 사용하는 언어나 표현능력이 부족한 점 인지해주시길 바랍니다.. 이전 글과 이어서 진행됩니다. 1. 각 컴포넌트에는 props를 인자로 줄 수 있습니다. props를 인자로 주게 될 경우 이 컴포넌트에 적용되어있는 속성을 전부 알 수 있습니다. 현재 App.js에는 함수형 컴포넌트인 Hello에 어떠한 속성도 주지 않았습니다. 2. 현재 "props"라는 문자열을 붙여서 나타냈기 때문에 Object 타입으로 나타나고 있으며 console.log(props)로 타이핑했을 경우 undefined가 나타나는 것을 알 수 있을 것입니다. 3. 그럼 이제는 직접 속성을 부여해서 props를 인자로 받았을 경.. 2020. 7. 12. 이전 1 2 다음
