목록전체 글 (296)
[꼼꼼한 개발자] 꼼코더
[React] - [처음 만난 리액트] - 15. Props의 특징 및 사용법(JSX, Props 사용예제)
🧹 두서없이 적는 쉬운 정리 1. Props의 중요한 특징은 Read-only 즉 읽기 전용이므로 변경이 불가하다. 2. 다른 Props의 값으로 엘리먼트를 생성하려면새로운 Props 값을 컴포넌트의 전달하여 새로 엘리먼트를 생성하면 된다. 3. 위 과정에서 엘리먼트가 다시 렌더링 된다. 4. Props의 값을 넣을 때 문자열 이외 [정수 변수 그리고 다른 컴포넌트 등]이 들어갈 경우 중괄호 {} 를 사용해서 감싸 주어야 한다. 5. Props는 자바스크립트 객체가 된다. 6. JSX 를 사용하는 경우에는 간단하게 컴포넌트의 Props를 넣을 수 있다. 7. JSX를 사용하지 않는경우에는 React.createElement()를 사용하면 된다. (비추천) (자세한 내용은 아래 참고) Props의 특징 P..
[ANKI] - 32. JDK, JRE, JVM을 비유로 설명하시오(07.05)
🙋🏻♂️ 문제 ✅ 정답 💡 느낀 점 음.. 솔직히 아직은 잘 감이 안 잡히지만 우선 외워야 하는 건 맞아 보인... 다?
[React] - [처음 만난 리액트] - 14. Components와 Props의 정의(Components란?, Props란?)
🧹 두서없이 적는 쉬운 정리1. 리액트는 컴포넌트 기반의 구조가 특징이며 모든 페이지가 컴포넌트로 구성되어 있다2. 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있다.4. 다시 말해 컴포넌트들은 마치 내고 블록을 조립하 듯 끼워 맞춰 새로운 컴포넌트를 만들 수 있다.5. 재사용성 코드 양 감소로 인하여 자연스레 개발 시간과 유지보수 비용도 줄일 수 있다.6. 컴포넌트는 자바스크립트의 함수와 비슷한데 입력은 Props라는 것이고 출력은 리액트 엘리먼트이다.7. 컴포넌트는 만들고자 하는 대로 Props 즉 속성을 넣으면 해당 속성에 맞춰 화면에 나타난 엘리먼트를 만들어 주는 것8. 하나의 컴포넌트로 여러 개의 엘리먼트를 찍어낼 수 있다.(붕어빵 틀 -> 붕어빵(슈크림, 팥)9. ..
[ANKI] - 31. Main 메소드 실행시 T 메모리에 일어나는 일은? (JVM, 과 JRE의 역할)(07.04)
🙋🏻♂️ 문제 ✅ 정답 💡 느낀 점 자주 봐서 꼭 기억하도록 해야 할 내용이다.
[ANKI] - 30. 자바의 데이터 저장 영역?(T 메모리 구조란?)(07.03)
🙋🏻♂️ 문제 ✅ 정답 💡 느낀 점 자바의 깊은 공부를 위하여 꼭 필요한 지식인데 자주 까먹어서 적어봤다..
[React] - [처음 만난 리액트] - 13. Elements의 특징 및 렌더링 하기
🧹 두서없이 적는 쉬운 정리 1. Elements는 한번 생성되면 변하지 않는다는 불변성을 가지고 있다. 2. 다른 말로 엘리먼트 생성 후에는 children이나 attributes를 바꿀 수 없다는 말 4. 엘리먼트를 생성한 이후에 실제로 화면에 보여주기 위해서는 렌더링이라는 과정을 거쳐야 한다 5. 리액트로만 만들어진 모든 웹사이트들은 단 하나의 Root DOM Node를 가지게 된다 6. 렌더링을 위해 ReactDOM에 render()라는 함수를 사용 7. 이 함수는 '첫번째 파라미터인 리액트 엘리먼트'를 '두 번째 파라미터인 html 엘리먼트'에 (즉 DOM 엘리먼트) 렌더링 하는 역할 8. 결국 리액트 엘리먼트가 렌더링 되는 과정은 Virtual DOM에서 실제 DOM으로 이동하는 과정 9. 한..
[React] - [처음 만난 리액트] - 12. Elements의 정의와 생김새(리액트 엘리먼트와 DOM 엘리먼트 차이점)
🧹 두서없이 적는 쉬운 정리1. Elements란 리액트 앱을 구성하는 가장 작은 블록들2. 실제 브라우저 DOM에 존재하는 엘리먼트 > DOM 엘리먼트, 리액트 Virtual DOM 존재하는 엘리먼트 > 리액트 엘리먼트3. 리액트 엘리먼트는 DOM 엘리먼트의 가상 표현버전4. Elements의 역할은 화면에서 보이는 것을 기술5. 리엑트는 React.createElement()를 통해서 만든 엘리먼트를 이용해서 실제 우리가 화면에서 보게 될 DOM 엘리먼트를 생성6. 리액트 엘리먼트는 자바스크립트 객체 형태로 존재하며 마음대로 변경할 수 없는 불변성을 갖고 있다7. createElement() 3가지의 파라미터(type, props, children) 8. type에는 html 태그와 리액트 컴포넌..
[React] - [처음 만난 리액트] - 11. JSX 코드 작성해보기 (Book.jsx, Library.jsx)
🧹 두서없이 적는 쉬운 정리 1. JSX를 사용하면 가독성이 높고 직관적인 코드를 작성할 수 있다. 2. 따라서 리액트 애플리케이션을 개발할 때에는 무조건 JSX를 사용하자 (자세한 내용은 아래 참고) 🧑🏻💻 Book 컴포넌트 작성(Book.jsx 생성) Props로 name과 numOfPage를 받아 출력하는 컴포넌트이다. 누가봐도 어떤 역할을 하는지 이해가 되는 코드이다. 따라서 JSX를 사용하면 가독성이 높고 직관적인 코드를 작성할 수 있다. 🧑🏻💻 Library.jsx 추가 (Library컴포넌트 생성) Book 컴포넌트를 사용하는 상위 컴포넌트인 Library를 만든다. Library 컴포넌트는 총 3개의 Book 컴포넌트를 렌더링 하고 있다. 이 코드도 마찬가지로 굉장히 가독성이 높다. 🧑..